HTML5 tag Video (player) learning notes (i)-initialization work

Recently there are learning HTML5 in the use of video tags (players), here to do some learning notes, easy to review and record, this article is the first, will introduce the use of the tag to initialize what to do.

Online tutorials are actually a lot of w3cschool inside the most simple and detailed, then these are some of the more direct application.

This article directory:

1. Using Labels
2. add some necessary parameters
3. Auto-Play or auto-load
4. Spec Player
5. 
   

First step: Using tags

The method used is very simple, it is a code:

<video></video>

The second step: Add some necessary parameters, such as the path to play the video, whether to display the control bar

to play the video, you must have the address of the video, which is to set the SRC attribute in the tag. At the beginning of the time can not do their own definition of the control bar, then first use the browser default, plus controls can, so it becomes this:

<video controls src= "Http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" ></video>

Step Three: Let the video play automatically or load automatically

The one thing that often needs to be done with the player is that when the page loads and starts playing the video, you need to set the video AutoPlay, which is to set the AutoPlay property.

<video controls Autoplay=true src= "Http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" ></video>

Sometimes in order to user some habits but do not need to automatically play, but in order to allow users to quickly see the video, so you need to let the video automatically load, then you need to set the Preload property, it is important to note that this does not fully load the video, but will only load the previous part.

<video controls preload= "Auto" src= "Http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" ></video>

Fourth Step: Let the player specification a little

What do you mean, let the player spec a bit? That is, there is a control bar (described earlier), before starting to see the screen, specify the size of the player.

The player if loaded into the video can be seen in the beginning of an initialization screen, but often there is the requirement to set the video to start to see the image (sometimes in order to attract the audience, will engage in a picture with little to do with the video, you understand), or because of the network problems, Do not display a black screen to the audience without loading the video, this time also need to do such a setting, that is to set the poster property:

<video controls preload= "Auto" poster= "http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg "  width=" 640 "height=" src= "Http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" ></video>

Generally in the application process, the player is the specified size, so to set the length of the player width, can be set through the style sheet, you can also be set through the property width height. Note that the width of the player needs to be set according to the ratio of the video, or the last to see the video is blank, if the player's width is higher than the video pixel can see the blurred stretching effect, so when setting the width of the height must pay attention, but can be set wide or high to observe, and then get accurate pixels, such as

<video controls preload= "Auto" width=300 poster= "http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/ 6608842237655242020.jpg "src=" Http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4 "></video>

After setting the width, in the browser debugging tool to see the adaptive height is 165, then set the height of 165

<video 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>

Summary:Through these four steps, you can complete a player's basic settings and use, mainly to understand some of the player's properties and applications, more applications that will be through the JS to control.

HTML5 tag Video (player) learning notes (i)-Initialization work