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

Most people do not understand the knowledge points of this article "how to insert the video into the HTML page", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to insert the video into the HTML page" article.

Now, if you want to use video tags in your page, you need to consider three situations: those that support Ogg Theora or VP8 (Opera, Mozilla, Chrome), and those that support H.264 (Safari, IE 9, Chrome), which are not supported (IE6, 7, 8). Okay, now let's take a look at HTML 5 videos from a technical perspective, including the use of video tags, media properties and methods that video objects can use, and media events.

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.

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

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

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

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

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

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.

The above is about the content of this article on "how to insert a video into a HTML page". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.