[HTML5] Video tag playback and control videos

Video is a new tag in HTML5, which uses the video tag to play Ogg, MP4
, WEBM and other formats, video tags introduced to reduce the front page on the Flash animation dependence.

0x0 Prep Knowledge

The video formats supported by different browsers may be different, and the following are excerpts from the three video formats supported by various browsers in W3school:

0x1 Embed videos in video

    <video src="/movie.mp4" controls="controls">        你就用这个浏览器有出息吗？    </video>

When the page is loaded, the Movie.mp4 file is referenced, and if the browser cannot support HTML5, the content in Video is prompted.

Obviously, to accommodate different browsers, we also need to prepare videos in a variety of different formats and use video to reference them:

    <video controls="controls">        <source src="/movie.mp4" type="video/mp4">        <source src="/movie.ogg" type="video/ogg">        你就用这个浏览器有出息吗？    <video>

0x2 Control Properties Using Video

Video provides several properties that allow you to control the functionality associated with each property. For example, controls provide progress, volume, and full-screen control for the video. Although the property corresponds to a value, we can still use controls instead of controls = "Controls".

The following code provides automatic caching, muting, and control bars:

    <video autobuffer muted controls>        <source src="/movie.mp4" type="video/mp4">        <source src="/movie.ogg" type="video/ogg">        你就用这个浏览器有出息吗？    <video>

Auto Play and Loop:

    <video autoplay loop controls>        <source src="/movie.mp4" type="video/mp4">        <source src="/movie.ogg" type="video/ogg">        你就用这个浏览器有出息吗？    <video>

0x3 controlling video playback using the HTML DOM

Basic playback, pause, mute function control:

    <button onclick="Play ()">Play/Pause</button>    <button onclick="mute ()">Mute</button>    <video id="Player" controls>        <source src="/movie.mp4" type="Video/mp4">        <source src="/movie.ogg" type="Video/ogg">Do you use this browser to be a promising one?<video>     <script> function  play   ()  { var  Playe            R = document.getElementById ( "player" ); if             (Player.play) {player.pause ();            }else  {player.play (); }} function  mute ()  { var  player = Document.getelem            Entbyid ( "player" ); player.muted = player.muted?                 false : true ; }    </script>

Usually on some video sites, users will record the progress of the last video playback, when the user re-enter the site, you can stop at the place to continue to watch. We can control the video playback progress through the HTML DOM:

    <video id="Player" controls>        <source src="/movie.mp4" type="Video/mp4">        <source src="/movie.ogg" type="Video/ogg"> Do you use this browser to be a promising one?<video>     <script>document.getElementById ("player"). AddEventListener (" loadedmetadata",             function() {this. currenttime = 5;    });                 </script>

Use JavaScript to adjust the CurrentTime property of the Video to achieve progress control, noting units in seconds rather than milliseconds. Because JavaScript needs to get the total time for the video to be adjusted, you need to wait until the video message is loaded before you can control the progress. Therefore, we bind the Loadedmetadata event to the video object, which is triggered when the visual information is loaded.

More HTML5 Video Reference:

HTML5 videos:10 things Designer need to Know
by Jake Rocheleau
Http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know

[HTML5] Video tag playback and control videos