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

This article mainly explains "what are the skills of using HTML5 video tags". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian slowly and deeply to study and learn "what are the skills of using HTML5 video tags" together!

Step 1: Use labels

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

copy code

The code is as follows:

Step 2: 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 video address, that is, you must set the src attribute in the tag. At the beginning, you can't do your own defined control bar, so you can use the browser default first, plus controls, so it becomes like this:

copy code

The code is as follows:

Step 3: Let the video play or load automatically

One of the things that players often need to do is to start playing videos when the page is loaded, so you need to set the video to play automatically, that is, set the autoplay attribute.

copy code

The code is as follows:

Sometimes in order to user some habits do not need to automatically play, but in order for users to be able to quickly see the video, so you need to let the video automatically load, then you need to set the preload attribute, it should be noted that this does not load the video completely, but only loads the previous part.

copy code

The code is as follows:

Step 4: Let the player standardize a bit

What do you mean, make the player more standard? That is, there are control bars (described above), the screen you see before you start playing, and the size of the player.

If the player loads the video, you can see an initialization screen at the beginning, but there are often such requirements, set the image that the video starts to see (sometimes in order to attract the audience, you 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 before loading the video. At this time, you also need to make such a setting, that is, set the poster attribute:

copy code

The code is as follows:

Generally speaking, in the application process, the player is a specified size, so to set the player's length and width, you can set it through the style sheet, or you can set it through the attribute width height. Note that setting the player width and height needs to be set according to the proportion of the video, otherwise the final video is blank, if the player width and height exceeds the video pixels, you can see the blurred stretching effect, so be sure to pay attention when setting the width and height, but you can only set the width or height to observe, and then get the accurate pixels, such as

copy code

The code is as follows:

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

copy code

The code is as follows:

Thank you for reading, the above is "HTML5 video tag use skills have what" content, after the study of this article, I believe that we have a deeper understanding of the HTML5 video tag use skills, the specific use of the situation also needs to be verified. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.