Playback control of HTML5 video tag

This article mainly introduces the playback control of the HTML5 video tag. This article explains how to obtain the total duration of the video, play, pause, obtain the playback time of the video, set the play point, obtain and set the volume, etc. Friends who need it can Refer to

The previous article introduced some work that needs to be done to initialize the html5 tag video (player), and how to use the html5 player simply and quickly. This article will focus on how to use JS to operate the video tag, that is How to perform some simple and basic operations on video, including playing and pausing the player, reading and setting the volume, and other related operations, thus starting the expansion of the player.

Table of contents of this article:

1. Get the total duration of the video
2. Play and pause
3. Get the played time of the video and set the play point
4. Acquisition and setting of volume

First, get the total duration of the video

When operating the player (video), the first thing to get is the video Some information, one of which is the total duration. In addition to the content, the total duration is also the first thing to be displayed. Before operating the video, add an ID to the video tag, so that we can easily obtain the video element

<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>

After setting an ID, we can start the operation. To obtain the total duration, we need to use video An event - loadedmetadata. The triggering of this event indicates that the metadata (some basic information of the media) has been loaded. Use addEventListener to listen for the event

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

. It should be noted that the unit of the total duration obtained is It is seconds. Convert it as needed when displaying.

Second, play and pause

The most basic function for the player is play and pause. After obtaining the total duration, the next operation That is play and pause. The two methods of video used at this time are play and 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();
 }

It should be noted that running the play method after the playback ends will play it from the beginning.

Third, get the playback time of the video and set the playback point

After the player can play and pause, the next thing you need to see is how long the video has played. , which time point is played. This operation is very similar to getting the total duration. It requires monitoring an event and getting the value of an attribute. Then the timeupdate event and currentTime attribute of the video are used.

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

will be displayed on the console after running Seeing a lot of data...

We often receive a request, that is, it was 10 minutes ago when we saw it last time. This time we want to start watching it from the tenth minute. Then we need to set the playback point at this time. Now, the currentTime attribute is still used to set the play point. The currentTime attribute is readable and writable. It should be noted that the unit of the setting value is seconds. If the play point is not in seconds, it must be converted.

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

Fourth, volume acquisition and setting

The player can pause and play during playback, know where it is playing now and can start playing from a certain point in time, then The next thing to do is the volume. This is similar to the third point. You can directly use the volume attribute to obtain the volume. But here we also introduce the trigger event of volume change. In the future, you need to customize the UI for use, that is, the volumechange event

//音量改变时
myVideo.addEventListener("volumechange", function(){
   var volume = myVideo.volume;//获取当前音量
   console.log(volume);//在调试器中打印
});

When you change the volume through the control bar, you will see a lot of data in the debugger. It should be noted that the range of volume is 0~1, and percentages are generally used in the UI, so conversion is required when necessary.

The volume can be set by changing the attributes, which is similar to the playback time point, except that the volume is set with the volume attribute

//设置音量
function setVol(num){ 
   myVideo.volume = num;
}

The following is the complete code:

   
   



   
<script>
var myVideo = document.getElementById(&#39;myVideo&#39;)//获取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(&quot;timeupdate&quot;, function(){
   var currentTime = myVideo.currentTime;//获取当前播放时间
   console.log(currentTime);//在调试器中打印
});</p> <p>//设置播放点
function playBySeconds(num){ 
   myVideo.currentTime = num;
}</p> <p>//音量改变时
myVideo.addEventListener(&quot;volumechange&quot;, function(){
   var volume = myVideo.volume;//获取当前音量
   console.log(volume);//在调试器中打印
});</p> <p>//设置音量
function setVol(num){ 
   myVideo.volume = num;
}
</script>

Summary: Use these four steps to understand the basic operations of the html5 tag video (player), and these operations are mainly completed through JS to monitor video events and read and write video attributes. Familiar These four points allow you to use the player flexibly and adjust it according to the application scenario.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use HTML5 How to draw polygons such as triangles and rectangles with Canvas

About the control analysis of H5 new attributes audio and video

The above is the detailed content of Playback control of HTML5 video tag. For more information, please follow other related articles on the PHP Chinese website!