HTML5 video tag (player) study notes (2): playback control_html5 tutorial skills

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, and also It is how to perform some simple and basic operations on video, including playing and pausing the player, reading and setting the volume, and other write-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 video playing time and set the play point
4. Get and set the volume

First, get the total duration of the video

When operating the player (video), the first thing you need 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

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

It should be noted that the unit of the total duration obtained is seconds, which should be converted as needed when displayed. 

Second, play, pause

The most basic function for the player is play and pause. 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

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 time point 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 and currentTime attribute of the video are used

We often receive a request, that is, it has been 10 minutes since we watched it last time. 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 is readable and writable. It should be noted that the unit of the set value is seconds. If the playback point is not in seconds, it must be converted

Fourth, obtaining and setting the volume

The player can pause and play during the playback process. It knows 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 directly use the volume attribute to obtain the volume. However, what we will also introduce here is the trigger event for volume change. In the future, we need to customize the UI for use, that is, the volumechange event

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

<script><br>var myVideo = document.getElementById('myVideo')//Get the video element <br> ,tol = 0 //Total duration<br>;<br>myVideo.addEventListener("loadedmetadata", function(){<br> tol = myVideo.duration;//Get the total duration<br>});</p> <p>//Play<br>function play(){ <br> myVideo.play();<br>}</p> <p>//Pause<br>function pause(){ <br> myVideo.pause();<br>}</p> <p>//When the playback time point is updated<br>myVideo.addEventListener("timeupdate", function(){<br> var currentTime = myVideo.currentTime;//Get the current playback time<br> console.log(currentTime );//Print in debugger<br>});</p> <p>//Set play point<br>function playBySeconds(num){ <br> myVideo.currentTime = num;<br>}</p> <p>//When the volume changes<br>myVideo.addEventListener("volumechange", function(){<br> var volume = myVideo.volume;//Get the current volume<br> console.log(volume);/ /Print in debugger<br>});</p> <p>//Set volume<br>function setVol(num){ <br> myVideo.volume = num;<br>}<br></script>

< ;/html>