HTML5 video标签的播放控制

互联网 18-6-11

这篇文章主要介绍了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>

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;//获取总时长 });

需要注意的是获取到的在总时长的单位为秒，显示的时候根据需要去转换。

第二、播放、暂停

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方法将会从头播放。

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

//播放时间点更新时 myVideo.addEventListener("timeupdate", function(){    var currentTime = myVideo.currentTime;//获取当前播放时间    console.log(currentTime);//在调试器中打印 });

运行后会在控制台看到很多数据...

//设置播放点 function playBySeconds(num){      myVideo.currentTime = num; }

第四、音量的获取和设置

//音量改变时 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中文网！