HTML5 video标签（播放器）学习笔记（二）:播放控制
介绍了html5标签video（播放器）初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用js来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读取、设置等写相关操作，从而开始播放器的扩展之路。
本文的目录：
1.获取影片总时长
2.播放、暂停
3.获取影片已播放时间和设置播放点
4.音量的获取和设置
第一、获取影片总时长
对播放器（video）操作，首先要得到的是影片的一些信息，其中一个就是总时长，除了内容以为，总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个id，这样方便我们获取video元素
<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>
设置一个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属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。
上一篇： Java NIO服务器端开发详解
下一篇： 谷歌浏览器被360导航劫持的解决办法
推荐阅读
-
HTML5 video标签（播放器）学习笔记（二）:播放控制
-
HTML5 video标签（播放器）学习笔记（一）:使用入门
-
HTML5 video标签（播放器）学习笔记（二）:播放控制
-
HTML5开发学习（1）：使用aduio标签打造音乐播放器
-
HTML5开发学习（1）：使用aduio标签打造音乐播放器
-
HTML5 video标签的播放控制
-
HTML5 video标签（播放器）学习笔记（二）:播放控制_html5教程技巧
-
HTML5 video标签（播放器）学习笔记（一）:使用入门_html5教程技巧
-
HTML5 video标签（播放器）学习笔记（二）:播放控制_html5教程技巧
-
HTML5 video标签（播放器）学习笔记（一）:使用入门_html5教程技巧