[HTML5] Video tag for Video playback and control, html5video

[HTML5] Video tag for Video playback and control, html5video

Video is a new tag in HTML5. You can use the Video tag to play ogg and mp4 videos.
The introduction of Video tags for Video and webm videos reduces the dependency of front-end pages on Flash animation.

0x0 prerequisites

Different browsers may support different video formats. The following is the video formats supported by various W3School browsers:

0x1 Embed Video in Video

<Video src = "/movie.mp4" controls = "controls"> do you have any interest in this browser? </Video>

When a page is loaded, the movie.mp4 file is referenced. If the browser cannot support HTML5, the content in Video is displayed.

Obviously, to adapt to different browsers, we also need to prepare videos in 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"> are you sure you want to use this browser? <Video>

0x2 use the Video control attribute

Video provides multiple attributes to control related functions. For example, controls the video progress, volume, and full screen. Although the property corresponds to the value, we can still use controls instead of controls = "controls ".

The following code provides an automatic cache, mute, and control bar:

<Video autobuffer muted controls> <source src = "/movie.mp4" type = "video/mp4"> <source src = "/movie.ogg" type = "video/ogg"> is there any interest in using this browser? <Video>

Automatic playback and loop:

<Video autoplay loop controls> <source src = "/movie.mp4" type = "video/mp4"> <source src = "/movie.ogg" type = "video/ogg"> is there any interest in using this browser? <Video>

0x3 Use html dom to control Video playback

Basic playback, pause, and mute functions:

<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 have any interest in this browser? <Video> <script> function play () {var player = document. getElementById ("player"); if (player. play) {player. pause ();} else {player. play () ;}} function mute () {var player = document. getElementById ("player"); player. muted = player. muted? False: true;} </script>

Generally, on some video websites, the progress of the last video played by the user is recorded. When the user enters the website again, he can continue watching at the stopped place. You can use html dom to control the video playback progress:

<Video id = "player" controls> <source src = "/movie.mp4" type = "video/mp4"> <source src = "/movie.ogg" type = "video/ogg"> are you sure you want to use this browser? <Video> <script> document. getElementById ("player"). addEventListener ("loadedmetadata", function () {this. currentTime = 5 ;}); </script>

Adjust the Video currentTime attribute in JavaScript to control the progress. Note that the unit is seconds rather than milliseconds. Because JavaScript needs to obtain the total video time for adjustment, you need to wait until the video information is loaded before controlling the progress. Therefore, we bind the loadedmetadata event to the Video object, which is triggered when the Video information is loaded.

For more HTML5 Video, refer:

HTML5 Videos: 10 Things Designer Need To Know
By Jake Rocheleau
Http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know