html5 video标签播放原理,HTML5 video标签播放控制教程技巧

第一、获取影片总时长

对播放器(video)操作，首先要得到的是影片的一些信息，其中一个就是总时长，除了内容以为，总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个ID，这样方便我们获取video元素

复制代码

代码如下:

poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"

src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

设置一个ID后，那么就可以开始操作了，要获取总时长，要用到video的一个事件-loadedmetadata，这个事件的触发表示元数据(媒体的一些基本信息)已经加载完成，用addEventListener监听事件

复制代码

代码如下:

var myVideo = document.getElementById('myVideo');//获取video元素

myVideo.addEventListener("loadedmetadata", function(){

//要执行的代码

});

好了，已经监听了，那么接下来要做的就是获取总时长，其实就是一个属性-duration

var myVideo = document.getElementById('myVideo')//获取video元素

,tol = 0

;

myV