Javascript实现视频文件播放功能(示例详解)
更新时间：2023年10月11日 11:21:15 作者：Meteor.792
这篇文章主要介绍了Javascript实现视频文件播放功能,使用CSS完成相应的布局样式,利用JavaScript函数来监听进度条,然后使用鼠标点击按钮实现对视频的播放,需要的朋友可以参考下
应用CSS基础和JavaScript的函数功能，制作一个视频播放器。使用CSS完成相应的布局样式，利用JavaScript函数来监听进度条，然后使用鼠标点击按钮实现对视频的播放。
CSS部分：
<style>
* {
margin: 0;
padding: 0;
}
.body{
height: 100%;
width: 100%;
background-image: url(风景.jpg);
position: fixed;
}
figcaption {
text-align: center;
font-family: "Microsoft YaHei";
font-size: 24px;
font-weight: 700;
line-height: 150px;
}
.player {
width:640px;
height:360px;
margin: 10px auto;
background-color: pink;
background:url("login_on.gif")
top center no-repeat;
background-size: auto 100%;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.player video {
height:100%;
display: block;
margin: 0px auto;
display: block;
}
.controls {
width: 620px;
height:40px;
background-color: black;
position: absolute;
left: 10px;
bottom: 10px;
border-radius: 10px;
}
.switch {
width: 20px;
height: 20px;
position: absolute;
top:10px;
left: 10px;
display: block;
text-align: center;
line-height: 20px;
color: yellow;
}
.progerss {
width: 400px;
height:10px;
position: absolute;
background-color:beige;
left: 40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
.cur-progress {
width:0%;
height:100%;
background: yellow;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
left: 450px;
top:10px;
font-size: 12px;
color: #fff;
}
.exted {
width: 20px;
height: 20px;
position: absolute;
top:10px;
right: 10px;
text-align: center;
line-height: 20px;
color: yellow;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.body{
height: 100%;
width: 100%;
background-image: url(风景.jpg);
position: fixed;
}
figcaption {
text-align: center;
font-family: "Microsoft YaHei";
font-size: 24px;
font-weight: 700;
line-height: 150px;
}
.player {
width:640px;
height:360px;
margin: 10px auto;
background-color: pink;
background:url("login_on.gif")
top center no-repeat;
background-size: auto 100%;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.player video {
height:100%;
display: block;
margin: 0px auto;
display: block;
}
.controls {
width: 620px;
height:40px;
background-color: black;
position: absolute;
left: 10px;
bottom: 10px;
border-radius: 10px;
}
.switch {
width: 20px;
height: 20px;
position: absolute;
top:10px;
left: 10px;
display: block;
text-align: center;
line-height: 20px;
color: yellow;
}
.progerss {
width: 400px;
height:10px;
position: absolute;
background-color:beige;
left: 40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
.cur-progress {
width:0%;
height:100%;
background: yellow;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
left: 450px;
top:10px;
font-size: 12px;
color: #fff;
}
.exted {
width: 20px;
height: 20px;
position: absolute;
top:10px;
right: 10px;
text-align: center;
line-height: 20px;
color: yellow;
}
</style>HTML部分：
<body class="body">
<figure>
<figcaption>视频播放</figcaption>
<div class="player">
<video src="商丘古城--夜景.mp4"></video>
<div class="controls">
<a href="#" rel="external nofollow" rel="external nofollow" class="switch icon-play" title="播放"></a>
<div class="progerss">
<div class="cur-progress"></div>
</div>
<div class="time">
<span class="curr-time">00:00:00</span>/
<span class="total-time">00:00:00</span>
</div>
<a href="#" rel="external nofollow" rel="external nofollow" class="exted icon-fullscreen" title="全屏"></a>
</div>
</div>
</figure>
</body>Javascript部分：
<script>
var video = document.querySelector("video")
var playBtn = document.querySelector(".switch");
var crrProgress = document.querySelector(".cur-progress");
var crrTime = document.querySelector(".curr-time");
var totalTime = document.querySelector(".total-time");
var exted = document.querySelector(".exted");
var tTime;
var cTime;
playBtn.onclick = function () {
if(video.paused){
video.play();
this.classList.remove("icon-play");
this.classList.add("icon-pause");
playBtn.title = "暂停";
}else{
video.pause();
this.classList.remove("icon-pause");
this.classList.add("icon-play");
playBtn.title = "播放";
}
}
video.oncanplay = function () {
tTime = video.duration;
var h = Math.floor(tTime / 3600);
var m = Math.floor(tTime % 3600 / 60);
var s = Math.floor(tTime % 60);
h = h >= 10 ? h :"0" + h;
m = m >= 10 ? m :"0" + m;
s = s >= 10 ? s :"0" + s;
totalTime.innerHTML = h + ":" + m + ":" + s;
}
video.ontimeupdate = function () {
cTime = video.currentTime;
var h = Math.floor(cTime / 3600);
var m = Math.floor(cTime % 3600 / 60);
var s = Math.floor(cTime % 60);
h = h >= 10 ? h :"0" + h;
m = m >= 10 ? m :"0" + m;
s = s >= 10 ? s :"0" + s;
crrTime.innerHTML = h + ":" + m + ":" + s;
var value = cTime / tTime;
crrProgress.style.width = value * 100 + "%";
}
exted.onclick = function () {
video.webkitRequestFullScreen();
}
</script>效果图：
JavaScript介绍：
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。
JavaScript脚本语言具有以下特点:
（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。 不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。
到此这篇关于Javascript实现视频文件播放功能的文章就介绍到这了,更多相关js视频文件播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript 实现滚动效果代码整理，需要的朋友可以参考下。2010-03-03
这篇文章主要介绍了javascript常见数字进制转换,结合实例形式分析了JavaScript十进制,十六进制及二进制的相互转换原理与技巧,需要的朋友可以参考下2016-04-04
sort方法在我们的日常开发中是经常使用的，sort方法一般是用来对数组进行排序的，但是你是否知道sort方法默认是按什么方式排序的呢？下面就和我一起来深入了解sort方法吧2023-05-05
这篇文章介绍了JS检测图片大小的实例，有需要的朋友可以参考一下2013-08-08
这篇文章主要介绍了JavaScript 性能优化小结的相关资料,需要的朋友可以参考下2015-10-10
本文主要对javascript的事件处理函数，动态创建html标记的两种方法进行详细介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
在JavaScript中,除了Object之外,Array类型恐怕就是最常用的类型了,与其他语言的数组有着很大的区别,JavaScript中的Array非常灵活,今天我就来总结了一下JavaScript中Array删除的方法,感兴趣的朋友跟随小编一起看看吧2023-12-12
这篇文章主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript中Window对象的属性及事件 的相关资料,需要的朋友可以参考下2015-12-12
Add a Formatted Table to a Word Document
Add a Formatted Table to a Word Document...2007-06-06
最新评论