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

The main content of this article is "how to achieve HTML5 video playback control", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to achieve HTML5 video playback control"!

The catalogue of this article:

1. Get the total duration of the movie

two。 Play, pause

3. Get the time when the movie has been played and set the playpoint

4. Acquisition and setting of volume

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

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.

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.

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.

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.

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.

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.

The code is as follows:

/ / set the volume

Function setVol (num) {

MyVideo.volume = num

}

Here is the complete 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

}

At this point, I believe you have a deeper understanding of "how to achieve HTML5 video playback control". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.