Detailed explanation of HTML5 video tag operation video

This time I will bring you the HTML5 video tag operationVideoDetailed explanation, what are the notes of the HTML5 video tag operation video, the following is a practical case, let's take a look .

In the current research on website production, people from all walks of life have never stopped using it and have been studying continuously. Among them, the use of HTML5 is a big breakthrough. For HTML5 video Tags believe that many people still don’t know how to control playback. This article will introduce to you the specific methods of controlling playback. If you are interested, let’s learn about it together.

Table of contents for this article:

1. Get the total duration of the video

2. Play, pause

3. Get the video playing time 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 some information about the video, 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

Copy code

code show as below:

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

Copy code

The code is as follows:

var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
//要执行的代码
});

Okay, now that you have monitored it, the next thing to do is to get the total duration, which is actually an attribute -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 seconds, which should be converted as needed when displayed.

Second, play and pause

The most basic function for the player is play and pause, and after obtaining the total duration, the next operation is play and pause. The two methods of video used at this time are play and pause

Copy code

The code is as follows:

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 when the playback is completed and then running the play method, the playback will start 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 been playing and what point in time it has been played. This operation is very similar to getting the total duration. It requires listening to an event and getting the value of an attribute. Then the timeupdate event of the video and the currentTime attribute

are used. Copy code

The code is as follows:

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

After running, you will see a lot of data on the console...

We often receive a request, that is, it has been 10 minutes since we last saw it. This time we want to start watching it from the tenth minute. Then we need to set the play point at this time. The currentTime attribute is still used to set the play point. The currentTime attribute It 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, obtaining and setting the volume

The player can pause and play during the playback process. It knows where the playback is now and can start playing from a certain point in time. Then the next operation 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 the 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 that there is 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;
}

Below 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("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});</p> <p>//设置音量
function setVol(num){ 
myVideo.volume = num;
}
</script>

总结：通过这四个步骤来了解html5标签video（播放器）的基本操作，而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。       

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

推荐阅读：

django控件及传参使用详解

Echarts实现动态变色柱状图

jQuery操作textarea输入字数限制

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