1.影片总时长的获取
想用HTML5 Video标签播放电影？先得知道它多长时间。给Video加个ID就好搞了！然后，等视频的元数据都加载好了（就是那个loadedmetadata事件），就能知道片子总共要播多久。不过这个时间是以秒为单位的，别忘了换算下再显示出来。
说到网上看视频，咱们就得知道它一共多长。看视频的时候往往都会想知道这视频是多久，还有多少没看完。所以，能即时又准确地告诉我们视频的总时长，就能让我们用起来更舒服了。
直接用JavaScript控制Video标签！首先，通过监听loadedmetadata事件，就能知道视频的总时间了~然后，按照你想要的方式把结果改成其他单位显示出来就好。
2.播放与暂停
播放和暂停，就是看视频要会的第一招！用play()来开播，pause()能让它暂停不放。等看完了，再按一次play()，就能从头再来~
播放和暂停，这俩操作你们得熟练比如，一下子点个播放就能看了；要是觉得累，就停下来歇息一会儿。这才叫真正地掌控视频！
在做网页开发时，我们可以用JavaScript来检测用户操作或智能控制按钮，从而让视频标签能顺利地播放和停止。
3.获取已播放时间和设置播放点
<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">
要知道电影有多长，还有看了多久，什么时候看的。只要注意timeupdate事件和currentTime属性就行。timeupdate事件就是电影播出位置变了的时候发生，currentTime属性告诉你现在播到哪儿了。
要是想追着上次看的那段视频往下看的话，就得设定播放起点！只要把currentTime这个东东设成你想要的秒数，它就能按照那个时间开始放！
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;//获取总时长
});
这些小玩意儿让你更能掌握自己看视频的进度和感觉，比如你随时就能知道自己看了多久，想从哪儿开始就从哪儿开始喽！
4.音量的读取与设置
看电影的时候，别忘了调整音量！这么做很简单，只要调视频页面上那个叫”Volume”的东西就成了。而且你知道吗？当音量发生变化的时候，它还会发出“volumechange”这个事件信号，以后你在自己弄APP之类的时候用得着这点小技巧~
好消息！我们的音量范围大概在0到1之间，有时候你看UI设计里音量大小都是用百分比显示的。没事儿，要是用到的话，适当换算一下单位就行。想要听歌更爽？那就试试调大或减小音量！
var myVideo = document.getElementById('myVideo')//获取video元素
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});
//播放
function play(){
myVideo.play();
}
//暂停
function pause(){
myVideo.pause();
}
总的来说，用JavaScript玩转HTML5Video标签，制作网页，让用户玩得更开心，这是个很实用的小技巧！
5.自定义UI设计与交互体验
除了那些基础的操作外，我们也能用这个去玩出新花样，举个例子，设置自己喜欢的视频播放器的样子，还有让它更好用的交互方式。比如说，用CSS给Video播放器加上美美的装饰，再配合上JavaScript，把它变得又好用又好玩儿。
咱们自己设定进度条，搞个快速切换呗（快进和快退），还有全屏模式这些功能都会让你更好地跟视频玩儿起来！但是，别忘了在各种小家伙上都能随意调整的响应式布局也很重要，这样才能让大家用得更舒心~
6.视频加载优化与性能提升
//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});
你知道吗？随着网速越来越快，大家更看重视频的加载速度~所以，我们得想办法把视频压缩小点、选个速度快的格式，这样才能让观众看得顺心！
另外，手机看视频会遇到卡的情况，这时候我们可以试试用那些专门用来提速的科技，比如硬件加速、流媒体啥的。
7.安全性与版权保护
看网络视频可得注意了，安全和版权保护可是大事。咱们得防臭小子把用户私事给爆出来，还要好好对待有版权的视频哟。
//设置播放点
function playBySeconds(num){
myVideo.currentTime = num;
}
搞在线视频时得用加密传输和防盗链那套，保证文件的安全性，还有就是要按照规矩尊重人家的版权，别动不动就侵权了。
8.跨平台兼容性考虑
现在的手机电脑大家都有很多种！所以，你做程序员时要注意，跨平台兼容是个大问题。比如，要让HTML5 Video标签在所有设备上都好用，就要针对各个平台和浏览器来调整。这样才能保证用户看视频时顺顺利利的嘛。
手机设备屏幕大小各异，分辨率也有区别，所以我们得根据不同型号调整显示效果的适配工作。
//音量改变时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});
9.用户行为统计与数据分析
最后那个小结讲的就是怎么用用户行为统计和数据分析来优化网站。比如，通过收集你看视频时生成的数据，分析它们就能让网站知道咱们的喜好、调整布局和提高服务水平了。
就拿用户爱看啥，哪个视频最火来说，这些数据能让我们更明白怎么改进网页内容和推荐系统这类东东~
评论0