HTML5 video tag (player) Study Notes (1): getting started, html5video

HTML5 video tag (player) Study Notes (1): getting started, html5video
This article mainly introduces the HTML5 video tag (player) Study Notes (1): getting started, this article describes how to use tags, such as the video playing path, whether to display control bar, enable automatic video playback or loading, and enable the player to be standardized. For more information, see

Recently, I used video tags (players) in html5. Here I will take some study notes for you to easily check and record them. This is the first article, this section describes how to use this label to initialize the tasks.

In fact, there are quite a few online tutorials in w3cschool which are the most simple and detailed, so these are some more direct applications.

Directory:

1. Use tags
2. Add necessary parameters
3. automatic playback or loading
4. Standard player

Step 1: use tags

The method is simple. It is a code:

The Code is as follows:
<Video> </video>

Step 2: add necessary parameters, such as the video playing path and whether to display the control bar.

To play a video, you must set the video address, that is, set the src attribute in the tag. At the beginning, you can't do the control bar defined by yourself, so you can use the default control bar in the browser and add the controls, so it becomes like this:

The Code is as follows:
<Video controls src = "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"> </video>

Step 3: Enable Automatic video playback or loading

One thing you often need to do with a player is to start playing a video when the page is loaded. You need to set automatic video playback, that is, to set the autoplay attribute.

The Code is as follows:
<Video controls autoplay = true src = "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"> </video>

Sometimes you do not need to play the video automatically for the sake of your habits, but you need to set the preload attribute to enable the video to be automatically loaded so that you can quickly see the video, note that this video will not be fully loaded, but will only load the previous part.

The Code is as follows:
<Video controls preload = "auto" src = "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"> </video>

Step 4: standardize the player

What makes the player standard? That is, there is a control bar (as described earlier), the screen that you see before you start playing the video, and the size of the player is specified.

If the player loads a video, it can see an initial screen at the beginning, but there is always such a requirement to set the picture to be seen at the beginning of the video (sometimes to attract the audience, you will get an image that has little to do with the video, you know), or because of network problems, do not display a black screen to the audience without loading the video, in this case, you also need to set the poster attribute:

The Code is as follows:
<Video controls preload = "auto" poster = "http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" width = "640" height = "264" src = "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"> </video>

In general, the player size is specified during the application process. Therefore, you can set the length and width of the player either in the style sheet or in the width height attribute. Note that you must set the width and height of the Player Based on the video proportion. Otherwise, the video is blank, if the width and height of the player exceed the video's pixels, you can see the Blur stretch effect. Therefore, you must pay attention to it when setting the width and height. However, you can only set the width or height to observe, then obtain accurate pixels, such

The Code is as follows:
<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, you can see that the adaptive height is 165 in the debugging tool in the browser. In this case, set the height to 165.

The Code is as follows:
<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>

Conclusion: through these four steps, you can complete the basic settings and use of a player, mainly to understand the attributes and applications of the player, more applications are controlled through JS.