Use of video tags

Now if you want to use the video tag on the page, there are three things to consider, support for Ogg Theora or VP8 (Opera, Mozilla, Chrome), support for H. P (Safari, IE 9, Chrome), are not supported (IE6, 7, 8). OK, now let's get to know the HTML 5 video from a technical level, including the use of video tags, the media properties and methods that can be used by the visual objects, and media events.

Use of video tags

The video tag contains several properties, such as SRC, poster, preload, AutoPlay, loop, controls, width, height, and a label used internally <source>. In addition to the <source> tag, the video tag can contain content that is returned when the specified videos cannot be played.

(1) SRC attribute and poster attribute

You can imagine what the SRC attribute is for. As with the tag, this property is used to specify the address of the video. The poster property is used to specify a picture to display when the current video data is invalid (preview). Invalid video data may be video loading, possibly video address error, and so on.

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

(2) Preload property

This property can also be used to understand the usefulness of a name, which defines whether video is preloaded. The property has three selectable values: None, metadata, auto. If you do not use this property, auto is the default.

<videowidth="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: Preload is not done. With this property value, it is possible that the page author believes that the user does not expect this video, or reduces the HTTP request.

Metadata: Partially preloaded. Use this property value to represent the page author that the user does not expect this video, but to provide some metadata (including dimensions, first frame, track list, duration, and so on) to the user.

Auto: Pre-load all.

(3) AutoPlay property

It's another property that looks at the name and knows the usefulness. The AutoPlay property is used to set whether the video plays automatically and is a Boolean property. When it appears, it means AutoPlay, and removing it means not playing automatically.

<videowidth="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 value of the Boolean property in HTML is not true and false. The correct usage is to use this property in the label to indicate true, at which point the property either has no value or its value is constant equal to his name (here, AutoPlay is <video autoplay/> or <video autoplay= "autoplay"/> Instead of using this property in the label to indicate false (this does not play AutoPlay as <video/>).

(4) Loop property

<videowidth="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 property is used to specify whether the video is looped back and is also a Boolean property.

(5) Controls Property

<videowidth="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 author does not use a script to generate the playback controller and requires the browser to enable its own playback control bar.

Control bar must include play pause control, play progress control, volume control and so on.

The default playback control bar for each browser is not the same on the interface. Because of my browser's strange problem, Firefox and Safari video tag is not normal, so these two can only be found on the Internet.

(6) Width property and Height property

It's a common attribute of the tag, so don't say it.

(7) Source Tag

<videowidth="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" /><sourcesrc="http://www.youname.com/images/first.ogg" /></video>

The source tag is used to give the media (because the audio tag can also contain this label, so here the media, not the video) specifies multiple selectable (only one of the browsers can finally select) file addresses, and can only be used when the media tag is not using the SRC attribute.

The browser detects in the order of the source label whether the video specified by the tag can be played (may not be supported by the video format, the video does not exist, etc.), and if it cannot play, change to the next. This method is used more for compatibility with different browsers. The source tag itself does not represent any meaning and cannot appear alone.

This tag contains src, type, media three properties.

SRC attribute: Used to specify the address of the media, as in the video tag.

Type attribute: Used to describe the types of media specified by the SRC attribute, to help the browser determine whether to support this type of media format before acquiring the media.

Media properties: Used to describe the medium in which the media is used, not set when the default value is all, which means that all media is supported. Do you think of the media properties of the <style> tag? Same as the same.

(8) A complete example

<videowidth="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" /><sourcesrc="http://www.youname.com/images/first.ogg" /></video>

This code defines a video in the page with a preview of the Poster property value, a default media control bar for the browser, a pre-loaded video metadata, a loop, a width of 900 pixels, and a height of 240 pixels.

The first Choice 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, the playback medium is the display; the second choice video address no longer describes. If you also want to be compatible with IE, you can add the tag set of the Flash Player after the last source tag, or use a bit of JavaScript code.

Use of video tags