Javascript实现视频文件播放功能(示例详解)
作者：Meteor.792
应用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视频文件播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！