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 = 0myVideo.addEventListener( loadedmetadata , function(){tol = myVideo.duration;//获取总时长}); /p p //播放function play(){ myVideo.play();} /p p //暂停function pause(){ myVideo.pause();}

需要注意的是，当播放结束后再运行play方法将会从头播放。

第三、获取影片的播放时间和设置播放点

播放器能播放和暂停后，那么接下来需要看到的就是影片播放了多久，播放到哪个时间点了。这个操作跟获取总时长很相似，都是需要监听一个事件和获取一个属性的值，那么用到的是video的timeupdate事件和html' target='_blank'>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属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。

相信看了本文案例你已经掌握了方法，更多精彩请关注php 其它相关文章！

推荐阅读：

django控件及传参使用详解

Echarts实现动态变色柱状图

jQuery操作textarea输入字数限制

以上就是HTML5的video标签操作视频详解的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。