Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the skills of HTML5 video tag playback control". The editor shows you the operation process through an actual case, the operation method is simple and fast, and it is practical. I hope this article "what are the skills of HTML5 video tag playback control" can help you solve the problem.

First, get the total duration of the film.

For the operation of the player (video), the first thing to get is some information about the movie, one of which is the total duration, in addition to the content, the total duration is also the first time to display. Add an ID to the video tag before operating on the video, which makes it easy for us to get the video element

Copy the code

The code is as follows:

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

Copy the code

The code is as follows:

Var myVideo = document.getElementById ('myVideo'); / / get video element

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

/ / Code to be executed

});

Okay, it's already listening, so the next thing to do is get the total length of time, which is actually an attribute-duration.

Var myVideo = document.getElementById ('myVideo') / / get video element

, tol = 0

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

Tol = myVideo.duration;// to get the total duration

});

It is important to note that the unit of total time obtained is seconds, and when displayed, it is converted as needed.

Second, play and pause

One of the most basic functions of the player is to play and pause, and after obtaining the total length of time, the next operation is to play and pause. At this time, the two methods of video are play and pause.

Copy the code

The code is as follows:

Var myVideo = document.getElementById ('myVideo') / / get video element

, tol = 0

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

Tol = myVideo.duration;// to get the total duration

});

/ / play

Function play () {

MyVideo.play ()

}

/ / pause

Function pause () {

MyVideo.pause ()

}

It is important to note that running the play method after the playback ends will play from scratch.

Third, get the playback time and set the playback point of the movie.

After the player can play and pause, the next thing you need to see is how long the movie has been played and when it has been played. This operation is very similar to getting the total length of time. Both need to listen to an event and get the value of a property, so the timeupdate event and currentTime property of video are used.

Copy the code

The code is as follows:

/ / when the playback time is updated

MyVideo.addEventListener ("timeupdate", function () {

Var currentTime = myVideo.currentTime;// to get the current playback time

Console.log (currentTime); / / print in the debugger

});

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

We often receive a request, that is, we saw it for 10 minutes last time, and this time we have to look at it from the tenth minute. At this time, we need to set the playback point, the currentTime property is still used to set the playback point, and the currentTime property is readable and writable. It should be noted that the unit of setting value is seconds, and if the playback point is not seconds, it is necessary to convert it.

Copy the code

The code is as follows:

/ / set the playback point

Function playBySeconds (num) {

MyVideo.currentTime = num

}

Fourth, the acquisition and setting of volume

The player can pause and play in the process of playing, know where it is playing 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 use the volume attribute directly to get the volume, but here we also introduce the trigger event of the volume change. The aspect needs to customize the use of UI in the future, that is, the volumechange event.

Copy the code

The code is as follows:

/ / when the volume changes

MyVideo.addEventListener ("volumechange", function () {

Var volume = myVideo.volume;// to get the current volume

Console.log (volume); / / print in the debugger

});

When you change the volume through the control bar, you will see that there is a lot of data in the debugging. It is important to note that the volume range is 0: 1, which is usually used as a percentage in UI, so convert it when needed.

The volume can be set by changing the property, which is similar to the playback time, except that the volume is set to the volume attribute.

Copy the code

The code is as follows:

/ / set the volume

Function setVol (num) {

MyVideo.volume = num

}

Here is the complete code:

Copy the code

The code is as follows:

Video step2

Var myVideo = document.getElementById ('myVideo') / / get video element

, tol = 0 / / total duration

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

Tol = myVideo.duration;// to get the total duration

});

/ / play

Function play () {

MyVideo.play ()

}

/ / pause

Function pause () {

MyVideo.pause ()

}

/ / when the playback time is updated

MyVideo.addEventListener ("timeupdate", function () {

Var currentTime = myVideo.currentTime;// to get the current playback time

Console.log (currentTime); / / print in the debugger

});

/ / set the playback point

Function playBySeconds (num) {

MyVideo.currentTime = num

}

/ / when the volume changes

MyVideo.addEventListener ("volumechange", function () {

Var volume = myVideo.volume;// to get the current volume

Console.log (volume); / / print in the debugger

});

/ / set the volume

Function setVol (num) {

MyVideo.volume = num

}

Summary: learn the basic operation of html5 tag video (player) through these four steps, which are mainly done by listening to video events and reading and writing video attributes through JS. If you are familiar with these four points, you can flexibly use the player, and then adjust it according to the application scenario.

This is the end of the content about "what are the skills of HTML5 video tag playback control". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.