Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand HTML5 video tags". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand HTML5 video tags.

The contents of this article:

1. Use label

two。 Add some necessary parameters

3. Auto play or auto load

4. Standardize the player

Step 1: use tags

The method used is very simple, which is a sentence of code:

The code is as follows:

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

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

The code is as follows:

Step 3: let the video play or load automatically

One of the things you often need to do with a player is to start playing the video when the page is loaded, then you need to set the video to play automatically, that is, to set the autoplay property.

The code is as follows:

Sometimes it is not necessary to play the video automatically for the sake of some habits of the user, but in order for the user to see the video quickly, so the video needs to be loaded automatically, then you need to set the preload property. It is important to note that this will not load the video completely, but will only load the previous part.

The code is as follows:

Step 4: let the player be more standardized

What do you mean let the player be more standardized? That is, there is a control bar (introduced earlier), the screen you see before you start playing, and specify the size of the player.

If the player loads the video, you can see an initialized screen at the beginning, but there is often a requirement to set the picture that the video starts to see (sometimes in order to attract viewers, it will make a picture 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. At this time, you also need to make such a setting, that is, set the poster attribute:

The code is as follows:

Generally speaking, the size of the player is specified during the application, so the length and width of the player can be set either in the stylesheet or through the attribute width height. It should be noted that setting the width and height of the player needs to be set according to the proportion of the video, otherwise the video will be blank at last, and if the width and height of the player exceeds the pixels of the video, you can see the fuzzy stretching effect, so you must pay attention to it when setting the width and height, but you can only set the width or height to observe, and then get accurate pixels, such as

The code is as follows:

After setting the width, you can see that the adaptive height in the debug tool in the browser is 165, then set the height to 165 at this time.

The code is as follows:

At this point, I believe you have a deeper understanding of "how to understand HTML5 video tags". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.