HTML5 video tag (player) study notes (1): Getting started_html5 tutorial skills

I have recently been studying the use of the video tag (player) in HTML5. Here are some study notes to facilitate your own review and recording. This article is the first one and will introduce what to do when using this tag to initialize it.

There are actually a lot of online tutorials. The ones in w3cschool are the simplest and most detailed, so these few introduce some more direct applications.

Directory of this article:

1. Use tags
2. Add some necessary parameters
3. Automatically play or load automatically
4. Standardize the player

Step one: Use tags

The method to use is very simple, just one line of code:

Copy the 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, which means setting the src attribute in the tag. If you can’t make your own custom control bar at the beginning, then just use the browser’s default one and add controls, so it becomes like this:

Copy the code

The code is as follows:

Step 3: Let the video play or load automatically

One thing you often need to do when using a player is to start playing the video as soon as the page is loaded. Then you need to set the video to automatically play, that is, set the autoplay attribute.

Copy code

The code is as follows:

Sometimes automatic playback is not required for some user habits, but in order for users to see the video quickly, the video needs to be loaded automatically, then the preload attribute needs to be set. It should be noted that this is not complete. instead of loading this video, only the first part will be loaded.

Copy code

The code is as follows:

Step 4: Make the player more standardized

What does it mean to make the player more standardized? That is, there is a control bar (already introduced before), the screen you see before starting playback, and the size of the player is specified.

If the player loads the video, you can see an initialization screen at the beginning, but there is often a requirement to set a picture for the video to see at the beginning of the video (sometimes in order to attract the audience, a picture Pictures that have little to do with the video, you know), or because of network problems, do not display a black screen to the audience before the video is loaded. At this time, you also need to make such a setting, that is, set the poster attribute. Available:

Copy code

The code is as follows:

Generally speaking, during the application process, the player has a specified size, so to set the length and width of the player, you can use the style sheet It can be set inside or through the attribute width height. It should be noted that the width and height of the player need to be set according to the proportion of the video. Otherwise, the video will be blank at the end. If the width and height of the player exceeds the pixels of the video, a blurred stretching effect will be seen, so when setting the width You must pay attention when it is high, but you can first set only 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, I saw in the browser debugging tool that the adaptive height is 165, then set the height to 165 at this time

Copy code

The code is as follows:

Summary: Through these four steps, you can complete the basic settings and use of a player. The main thing is to understand some of the properties and application scenarios of the player. More applications must be controlled through JS. .