HTML5的video标签操纵视频详解
在此刻关于网站制作的研讨中，各方面的人员使用没有休止过，不断在不断的专研，其中HTML5的使用就是很大的一冲破，关于HTML5的video标签信赖许多人还不知道如何操纵播放，这里文章就给大家介绍下详细操纵播放的办法，感乐趣的一起来理解下。
本文的名目：
1.猎取影片总时长
2.播放、暂停
3.猎取影片已播放时间和设定播放点
4.音量的猎取和设定
第一、猎取影片总时长
对播放器（video）操纵，第一要得到的是影片的一些信息，其中一个就是总时长，除了内容认为，总时长也是第一时间要显示的。在对video停止操纵的的前先给video标签增加一个ID，这样利便我们猎取video元素
复制代码
代码如下:
设定一个ID后，那么就可以开端操纵了，要猎取总时长，要用到video的一个事件-loadedmetadata，这个事件的触发布示元数据（媒体的一些根本信息）已经加载完成，用addEventListener监听事件
复制代码
代码如下:
var myVideo = document.getElementById('myVideo');//猎取video元素
myVideo.addEventListener("loadedmetadata", function(){
//要施行的代码
});好了，已经监听了，那么接下来要做的就是猎取总时长，其实就是一个属性-duration
var myVideo = document.getElementById('myVideo')//猎取video元素
,tol = 0;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//猎取总时长
});需要留意的是猎取到的在总时长的单位为秒，显示的时候按照需要去转换。
第二、播放、暂停
对播放器来说最根本的一个功效就是播放和暂停了，而在猎取总时长后，接着的操纵也就是播放和暂停。这个时候用到了video的两个办法就是play和pause
复制代码
代码如下:
var myVideo = document.getElementById('myVideo')//猎取video元素
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//猎取总时长
});</p> <p> //播放
function play(){
myVideo.play();
}</p> <p> //暂停
function pause(){
myVideo.pause();
}需要留意的是，当播放完毕后再运转play办法将会从头播放。
第三、猎取影片的播放时间和设定播放点
播放器能播放和暂停后，那么接下来需要看到的就是影片播放了多久，播放到哪个时间点了。这个操纵跟猎取总时长很类似，都是需要监听一个事件和猎取一个属性的值，那么用到的是video的timeupdate事件和currentTime属性
复制代码
代码如下:
//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//猎取当前播放时间
console.log(currentTime);//在调试器中打印
});运转后会在操纵台看到许多数据...
我们经常会接到一个要求，那就是上次看到了10分钟了，这次看要从第十分钟开端看，那么这个时候就需要设定播放点了，设定播放点用得还是currentTime属性，currentTime属性是可读写的，要留意的是设定值的单位是秒，假如播放点不是秒为单位那就要停止转换
//设定播放点
function playBySeconds(num){
myVideo.currentTime = num;
}第四、音量的猎取和设定
播放器播放的历程中能暂停、播放，知道此刻播放到哪里了和可以从某个时间点开端播放，那么接下来操纵的就是音量了。这一点跟第三类似，猎取音量可以直接用volume属性就可以了，但是在这里还要介绍的是音量改动的触发事件，方面今后需要自定义UI使用，那就是volumechange事件
//音量改动时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//猎取当前音量
console.log(volume);//在调试器中打印
})；当你通过操纵条来改动音量时，你会看到调试里面有许多数据。要留意的是音量的范畴值为0~1，一样在UI中都是用百分比，所以需要的时候要停止转换。
音量是可以通过改动属性来设定的，跟播放的时间点是类似的，只不外音量设定的是volume属性
//设定音量
function setVol(num){
myVideo.volume = num;
}下面是完全的代码：
<!DOCTYPE html>
<html>
<head>
<title>Video step2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<video id="myVideo" controls preload="auto" width=300 height="165"
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
</video>
<script>
var myVideo = document.getElementById('myVideo')//猎取video元素
,tol = 0 //总时长
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//猎取总时长
});</p> <p>//播放
function play(){
myVideo.play();
}</p> <p>//暂停
function pause(){
myVideo.pause();
}</p> <p>//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//猎取当前播放时间
console.log(currentTime);//在调试器中打印
});</p> <p>//设定播放点
function playBySeconds(num){
myVideo.currentTime = num;
}</p> <p>//音量改动时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//猎取当前音量
console.log(volume);//在调试器中打印
});</p> <p>//设定音量
function setVol(num){
myVideo.volume = num;
}
</script>
</body>
</html>总结：通过这四个步骤来理解html5标签video（播放器）的根本操纵，而这些操纵主如果通过JS来监听video的事件和对video属性的读写来完成的，熟知这四点即可灵敏的在使用播放器，再按照利用场景来调整即可。
信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！
引荐阅读：
django控件及传参使用详解
Echarts实现动态变色柱状图
jQuery操纵textarea输入字数限制
以上就是HTML5的video标签操纵视频详解的具体内容，更多请关注百分百源码网其它相关文章！
