Summary of methods for inserting videos into HTML pages

Now if you want to use the video tag in a page, you need to consider three situations: those that support Ogg Theora or VP8 (if there is nothing wrong with this thing) (Opera, Mozilla, Chrome), those that support H.264 (Safari, IE 9, Chrome), and those that do not support it (IE6, 7, 8). Okay, now let's take a look at HTML 5 video from a technical perspective, including the use of the video tag, the media attributes and methods that can be used by video objects, and media events.

Use of Video Tag

The Video tag contains several attributes such as src, poster, preload, autoplay, loop, controls, width, height, and an internally used tag <source>. In addition to the <source> tag, the Video tag can also contain the content that is returned when the specified video cannot be played.

(1) src attribute and poster attribute

You can imagine what the src attribute is used for. Like the <img> tag, this attribute is used to specify the URL of the video. The poster attribute is used to specify an image to be displayed when the current video data is invalid (preview image). Invalid video data may be due to the video being loaded, the video address being incorrect, etc.

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

(2) preload attribute

This property is also self-explanatory by name. It is used to define whether the video should be preloaded. The attribute has three possible values: none, metadata, and auto. If this property is not used, it defaults to auto.

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

None: No preloading is performed. This attribute value may be used by the page author to indicate that the user does not expect this video, or to reduce HTTP requests.

Metadata: Partially preloaded. By using this attribute value, the page author assumes that the user does not expect this video, but provides some metadata for the user (including dimensions, first frame, track list, duration, etc.).

Auto: Preload all.

(3) autoplay attribute

This is another attribute whose usefulness can be understood by looking at its name. The Autoplay attribute is used to set whether the video plays automatically. It is a Boolean attribute. When it appears, it means automatic play, and when it is removed, it means no automatic play.

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

Note that the values ​​of Boolean attributes in HTML are not true and false. The correct usage is to use this attribute in the tag to indicate true. In this case, the attribute either has no value or its value is always equal to its name (here, automatic play is <video autoplay /> or <video autoplay="autoplay" />); and not using this attribute in the tag indicates false (here no automatic play is <video />).

(4) loop attribute

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

As you can see, the loop attribute is used to specify whether the video should be played in a loop. It is also a Boolean attribute.

(5) controls attribute

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

The Controls property is used to indicate to the browser that the page maker did not use scripts to generate the playback controller and that the browser needs to enable its own playback control bar.

The control bar must include play pause control, playback progress control, volume control, etc.

The default playback control bar of each browser is different in interface. Due to a weird issue with my browser, the Video tags on Firefox and Safari don’t work properly, so I can only find screenshots of these two on the Internet.

(6) Width and height attributes

This is a common attribute of the tag, so there is no need to explain it further.

(7) source tag

<video width="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

The Source tag is used to specify multiple selectable (the browser can only select one in the end) file addresses for media (because the audio tag can also contain this tag, so media is used here instead of video), and can only be used when the media tag does not use the src attribute.

The browser checks in the order of the source tags whether the video specified by the tag can be played (it may be that the video format is not supported, the video does not exist, etc.). If it cannot be played, it will switch to the next one. This method is mostly used to be compatible with different browsers. The Source tag itself does not represent any meaning and cannot appear alone.

This tag contains three attributes: src, type, and media.

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

Type attribute: used to indicate the type of media specified by the src attribute, helping the browser determine whether it supports this type of media format before obtaining the media.

Media attribute: used to indicate the medium in which the media is used. If not set, the default value is all, indicating that all media are supported. Do you think of the media attribute of the <style> tag? Same same same.

(8) A complete example

<video width="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

This code defines a video on the page. The preview image of this video is the attribute value of poster, the default media control bar of the browser is displayed, the metadata of the video is preloaded, and it is played in a loop. The width is 900 pixels and the height is 240 pixels.

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 not repeated. If you also want to be compatible with IE, you can add a Flash player tag set after the last source tag, or use a little JavaScript code.

Summarize

The above is a summary of the method of inserting videos into HTML web pages introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!