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

The content of this article is mainly about how to insert a video into the html page. The content of the article is clear and well-organized. It is very suitable for beginners to learn and is worth reading. Interested friends can follow the editor to read together. I hope you can get something through this article!

The use of Video tags

The Video tag contains several attributes such as src, poster, preload, autoplay, loop, controls, width, height, and 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) 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.

one

two

(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.

one

two

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 (including size, first frame, track list, duration, and so on).

Auto: all preloaded.

(3) 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.

one

two

Notice that the values of the Boolean attribute in HTML are not true and false. The correct use is to use this attribute to represent true in the tag, where the attribute either has no value or its value is always equal to his name (here, autoplay is or), while this attribute is not used in the tag to indicate false (auto playback is not performed here).

(4) loop attribute

one

two

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) controls attribute

one

two

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.

(6) width attribute and height attribute

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

(7) source tag

one

two

three

four

The Source tag is used to assign multiple optional (browser can only choose one) file addresses to the media (because the audio tag can also contain this tag, so media instead of video is used here), 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. Have you thought of the media attribute of the tag? It's the same.

(8) A complete example

one

two

three

four

This code defines a video on the page, the preview of this video is the property value of poster, displays the default media control bar of the browser, preloads the metadata of the video, and plays it in a loop, with a width of 900pixel and a height of 240pixel.

The first selected video address is the src attribute value of the first source tag, the video category is Ogg video, the video codec is Theora, the audio codec is Vorbis, and the playback medium is the display.; the second selected video address is no longer repeated. If you want to be compatible with IE, you can add the Flash player tag set after the last source tag, or use a little JavaScript code.

What are the characteristics of html 1, simplicity: hypertext markup language version upgrade using superset mode, thus more flexible and convenient, suitable for beginner front-end developers to use. 2. Extensibility: the wide application of hypertext markup language brings the requirements of strengthening functions and increasing identifiers. Hypertext markup language adopts the way of subclass elements to ensure the expansion of the system. 3. Platform independence: hypertext markup language can be used on a wide range of platforms, which is one of the reasons why the World wide Web is so popular. 4. Versatility: HTML is the universal language of the network, which allows web producers to create complex pages that combine text and pictures, which can be viewed by anyone else on the Internet, no matter what type of computer or browser they are using.

Thank you for your reading. I believe you have some understanding of "how to insert a video in a html page". Go ahead and practice it. If you want to know more about it, you can follow the website! The editor will continue to bring you better articles!

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.