HTML5 video tag (player) learning notes (2): playback control, html5video

HTML5 video tag (player) learning notes (2): playback control, html5video
This article mainly introduces the HTML5 video tag (player) learning notes (2): playback control, this article describes how to get the total video duration, play, pause, obtain the video playback time, set the playback point, Volume acquisition, and settings. For more information, see

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 easily 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 the video, including playing, pausing, reading and setting the volume of the player, and then starting the expansion of the player.

Directory of this article:

1. Get the total video duration
2. Play and pause
3. Obtain the video playback time and set the playback point.
4. Volume acquisition and setting

1. Obtain the total video duration

For video operations, you must first obtain the video information, one of which is the total duration. In addition to the content, the total duration is displayed immediately. Add an ID to the video label before performing operations on the video so that we can get the video element.

The Code is as follows:
<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, you can start the operation. To obtain the total length, you need to use a video event-loadedmetadata. The trigger of this event indicates metadata (some basic information about the media) loading completed. Use addEventListener to listen for events.

The Code is as follows:
Var myVideo = document. getElementById ('myvideo'); // get the video Element
MyVideo. addEventListener ("loadedmetadata", function (){
// Code to be executed
});
Okay, I have listened, so the next step is to get the total duration, which is actually an Attribute-duration
Var myVideo = document. getElementById ('myvideo') // obtain the video element.
, Tol = 0
;
MyVideo. addEventListener ("loadedmetadata", function (){
Tol = myVideo. duration; // obtain the total duration
});

Note that the unit of the obtained total duration is seconds, which are converted as needed during display.

2. Play and pause

For the player, the most basic function is playing and pausing. After obtaining the total duration, the subsequent operation is playing and pausing. At this time, two methods of video are used: play and pause.

The Code is as follows:
Var myVideo = document. getElementById ('myvideo') // obtain the video element.
, Tol = 0
;
MyVideo. addEventListener ("loadedmetadata", function (){
Tol = myVideo. duration; // obtain the total duration
}); </P> <p> // playback
Function play (){
MyVideo. play ();
} </P> <p> // pause
Function pause (){
MyVideo. pause ();
}

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

3. Obtain the video playback time and set the playback point.

After the player can play and pause, you need to see how long the video has been played and at which time it has been played. This operation is similar to obtaining the total length of time. You need to listen to an event and obtain the value of an attribute. Therefore, you need to use the video timeupdate event and currentTime attribute.

The Code is as follows:
// When the playback time point is updated
MyVideo. addEventListener ("timeupdate", function (){
Var currentTime = myVideo. currentTime; // get the current playback time
Console. log (currentTime); // print in the debugger
});

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

We often get a request that we have seen the last 10 minutes. This time we will see it starting from the tenth minute, so we need to set the playing point at this time, set the stream playback point to the currentTime attribute. The currentTime attribute can be read and written. Note that the unit of the set value is second. If the stream playback point is not second, the stream playback point must be converted.

The Code is as follows:
// Set the playback point
Function playBySeconds (num ){
MyVideo. currentTime = num;
}

4. Volume acquisition and setting

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

The Code is as follows:
// When the volume changes
MyVideo. addEventListener ("volumechange", function (){
Var volume = myVideo. volume; // obtain the current volume
Console. log (volume); // print in the debugger
});

When you change the volume through the control bar, you will see a lot of data in the debugging. Note that the volume value ranges from 0 ~ 1. The percentage is usually used in the UI, so the conversion is required.

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

The Code is as follows:
// Set the volume
Function setVol (num ){
MyVideo. volume = num;
}

The complete code is as follows:

The Code is as follows:
<! 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') // obtain the video element.
, Tol = 0 // total duration
;
MyVideo. addEventListener ("loadedmetadata", function (){
Tol = myVideo. duration; // obtain the total duration
}); </P> <p> // playback
Function play (){
MyVideo. play ();
} </P> <p> // pause
Function pause (){
MyVideo. pause ();
} </P> <p> // when the playback time is updated
MyVideo. addEventListener ("timeupdate", function (){
Var currentTime = myVideo. currentTime; // get the current playback time
Console. log (currentTime); // print in the debugger
}); </P> <p> // sets the playback point.
Function playBySeconds (num ){
MyVideo. currentTime = num;
} </P> <p> // when the volume is changed
MyVideo. addEventListener ("volumechange", function (){
Var volume = myVideo. volume; // obtain the current volume
Console. log (volume); // print in the debugger
}); </P> <p> // sets the volume.
Function setVol (num ){
MyVideo. volume = num;
}
</Script>
</Body>
</Html>

Conclusion: These four steps are used to understand the basic operations of the html5 tag video (player). These operations are completed by listening to video events and reading and writing video attributes through JS, when you are familiar with these four points, you can use the player flexibly, and then adjust it based on the Application scenario.