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

This article mainly introduces the relevant knowledge of "how to use the Video tag in HTML5". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "how to use the Video tag in HTML5" can help you solve the problem.

The Video tag in the production of the website contains several attributes such as src, poster, preload, autoplay, loop, controls, width, height, as well as a tag for internal use. In addition to the tag, the Video tag can also contain the content returned when the specified video cannot be played.

(1) source tag

The Source tag is used to assign multiple optional file addresses to the media (because the audio tag can also contain this tag, so media instead of video), and can only be used if the media tag does not use the src attribute. The browser detects whether the video specified by the tag can be played according to the order of the source tag (maybe the video format is not supported, the video does not exist, etc.), and if it cannot be played, switch to the next one. This method is mostly used to be compatible with different browsers. The Source tag itself does not mean anything and cannot appear alone. This tag contains three attributes: src, type, and media.

Src attribute: used to specify the address of the media, the same as the video tag.

Type attribute: used to indicate that the src attribute specifies the type of media to help browsers determine whether this category of media format is supported before getting the media.

Media attribute: used to describe the media in which the media is used. If it is not set, the default value is all, indicating that all media are supported.

(2) preload attribute

This property can also be used by name, which is used to define whether the video is preloaded. Properties have three optional values: none, metadata, and auto. If you do not use this property, the default is auto.

None: no preloading occurs. Using this property value, it may be because the page maker believes that the user does not expect the video, or reduces HTTP requests.

Metadata: partially preloaded. Using this property value means that the page maker believes that the user does not expect the video, but provides the user with some metadata.

Auto: all preloaded.

(3) src attribute and poster attribute

You can imagine what the src attribute is for. Follow

As with the tag, this attribute is used to specify the address of the video. The poster property is used to specify a picture to be displayed when the current video data is invalid (preview). Invalid video data may be due to video being loaded, video address error, and so on.

(4) loop attribute

It is clear at a glance that the loop property is used to specify whether the video is played in a loop, which is also a Boolean attribute.

(5) autoplay attribute

It's another attribute that knows its usefulness by its name. The Autoplay property, which is used to set whether the video is played automatically, is a Boolean property. When it appears, it will be played automatically, and if it is removed, it will not be played automatically. Notice that the values of the Boolean attribute in HTML are not true and false. The correct use is to use this attribute in the tag to represent true, where the property either has no value or its value is always equal to its name (here, automatically play as

Or

); instead of using this attribute in the tag to indicate false (auto playback is not performed here as

).

(6) width attribute and height attribute

It belongs to the general attribute of the tag, needless to say.

(7) controls attribute

The Controls property is used to indicate to the browser that the page maker did not use a script to generate the playback controller, requiring the browser to enable its own playback control bar. The control bar shall include playback pause control, playback progress control, volume control and so on. The default playback control bar for each browser is different on the interface. Due to the weird problem with my browser, the Video tags of Firefox and Safari are not normal, so these two can only look for screenshots on the Internet.

This is the end of the introduction on "how to use Video tags in HTML5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.