Summarize the methods of inserting videos into HTML web pages

Now if you want to use the video tag in the page, you need to consider three situations: those that support Ogg Theora or VP8 (if nothing happens to this thing) (Opera, Mozilla, Chrome), and those that support H.264 (Safari, IE 9, Chrome), are not supported (IE6, 7, 8). Okay, now let us understand HTML 5 video from a technical perspective, including the use of video tags, media attributes and methods that can be used by video objects, and media events. This article mainly introduces a summary of methods for inserting videos into HTML web pages. Friends in need can refer to it, I hope it can help everyone.

Usage of Video tag

Video tag contains several attributes such as src, poster, preload, autoplay, loop, controls, width, height, etc. , and an internal tag e02da388656c3265154666b7c71a8ddc. In addition to the e02da388656c3265154666b7c71a8ddc tag, the Video tag can also contain content 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 a1f02c36ba31691bcfe87b2722de723b tag, this attribute is used to specify the address of the video. The poster attribute is used to specify a picture to be displayed (preview picture) when the current video data is invalid. Invalid video data may mean that the video is loading, the video address may be 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

The use of this attribute can also be understood through its name. This attribute Used to define whether the video is preloaded. The attribute has three optional values: none, metadata, and auto. If this attribute is not used, the default is 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. Using this attribute value, it is possible that the page author believes that the user does not expect this video, or to reduce the HTTP request.

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

Auto: All preloaded.

(3) autoplay attribute

is another attribute whose use can be known 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 playback. If it is removed, it means not automatic playback.

<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 a tag to indicate true. At this time, the attribute either has no value or its value is equal to its name (here, autoplay is 88395cc09d20900dd400beb3fbdab712 or 95caa6b758268b84808bd13379d1d81d); and not using this attribute in the tag means false (not autoplaying here is 19e1f8ade8f7b36b7291bedfcc4c695e).

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

At a glance, the loop attribute is used to specify whether the video plays in a loop , 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 attribute is used to indicate the page author to the browser No script is used to generate the playback controller, and the browser needs to enable its own playback control bar.

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

The default playback control bar of each browser is different in the interface. Due to a weird problem with my browser, the Video tags of Firefox and Safari are not working properly, so I can only find screenshots of these two online.

(6) The width attribute and the height attribute

are common attributes of tags. Needless to say more about this.

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

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

The browser checks whether the video specified by the tag can be played in the order of the source tag (it may be that the video format is not supported, the video does not exist, etc.). If it cannot be played, replace it with 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 describe the type of media specified by the src attribute, helping the browser determine whether it supports this category of media formats before obtaining the media.

Media attribute: Used to describe the medium in which the media is used. If not set, the default value is all, indicating that all media are supported. Have you thought about the media attribute of the c9ccee2e6ea535a969eb3f532ad9fe89 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 in the page, this The preview image of the video is the attribute value of the poster, displays the browser's default media control bar, preloads the metadata of the video, plays in a loop, with a width of 900 pixels and a height of 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 monitor; the second selected video The address will not be repeated again. If you still 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.

How to use H5 to operate audio and video

html5 video playback tutorial

HTML5 video and audio implementation steps

The above is the detailed content of Summarize the methods of inserting videos into HTML web pages. For more information, please follow other related articles on the PHP Chinese website!