现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、 Chrome) does not support (IE6, 7, 8). Well, let's understand the HTML 5 video from the technical level, including the use of Video tags, the media attributes and methods that video objects can use, and media events.
Use of Video labelVideo tags contain src, poster, preload, AutoPlay, LOOP, Controls, Width, Height and other attributes, as well as a label <Source> internally used. In addition to the <Source> label, the Video tag can also include the content returned when the specified video cannot be played.
(1) SRC attributes and poser attributesCan you imagine what the src attribute is used to do. Like the <IMG> label, this attribute is used to specify the address of the video. The Poster attribute is used to specify a picture, displaying (preview diagram) when the current video data is invalid. The invalid video data may be that the video is being loaded, which may be the error of the video address.
<video width = 658 height = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png Toplay> </Video>(2) Preload attribute
This attribute can also be understood through the name. This attribute is used to define whether the video is pre -loaded. There are three optional values: None, Metadata, 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 Toplay Preload = None> < /video>
None: No pre -load. Using this attribute value may be that page producers believe that users do not expect this video, or reduce HTTP requests.
Metadata: Partial pre -load. Using this attribute value, the page producer believes that users do not expect this video, but provide users with some metadata (including size, first frame, track list, duration, etc.).
Auto: All pre -load.
(3) AutoPlay attributeAnother attribute that depends on the name knows the purpose. The AutoPlay attribute is used to set the video whether the video is automatically played, which is a Boolean attribute. When it appears, it means that automatic playback, which means that it does not play.
<video width = 658 height = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png Toplay Preload = None> < /video>
Note that the value of Boolean attributes in HTML is not true and false. The correct usage is that using this attribute in the label indicates True. At this time, the attribute is either worthless, or its value is equal to his name (here, automatically play <video Autoplay /> or <video autoplay = Autoplay />)) ; If this attribute is not used in the label, it means False (the automatic playback 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 toplay loop = loop> < /video>
It is clear at a glance that the LOOP attribute is also used to specify whether the video is circulated, which 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 Toplay Preload = None Controls = Controls> </Video>
Controls attributes are used to indicate to the browser to indicate that the page producer does not use a script to generate a playback controller, and the browser needs to use the playback control bar.
The control bar must include play pause control, play progress control, volume control, and so on.
The default playback control bar of each browser is different on the interface. Due to the weird problems of my browser, the Video label of Firefox and Safari is not normal, so these two can only find screenshots online.
(6) Width attributes and height attributesThe universal attribute belongs to the label, so there is no need to say this.
(7) Source tag<video width = 658 Height = 444 Poster = http://www.youname.com/images/firs /png autoplay = Autoplay Preload = None Controls> <Source S> <Source S rc = http://www.youname.com/images /firtst.ogv/> <Source src = http://www.youname.com/images/first.ogg/> </video>
Source label is used to specify multiple options (because Audio tags can also include this label, so use the media instead of video) (the browser can only choose one in the end) Use when using SRC attributes.
The browser can detect whether the video specified by the source label can be played (maybe the video format does not support, the video does not exist, etc.). If it cannot be played, replace the next one. This method is mostly used for different browsers. Source tag itself does not mean any meaning and cannot appear alone.
This label includes three attributes: SRC, Type, and Media.
SRC attributes: used to specify the address of the media, the same as the Video label.
Type attribute: It is used to explain the type of SRC attribute specified media, helping the browser to determine whether to support such a media format before obtaining the media.
MEDIA attributes: It is used to explain where the media is used in the medium, and the default value is ALL when it is not set, which means supporting all mediums. Do you think of the MEDIA attribute of the <style> label? The same.
(8) A complete example<video width = 658 Height = 444 Poster = http://www.youname.com/images/firs /png autoplay = Autoplay Preload = None Controls> <Source S> <Source S rc = http://www.youname.com/images /firtst.ogv/> <Source src = http://www.youname.com/images/first.ogg/> </video>
This code defines a video in the page. The preview of this video is the attribute value of the Poster, which displays the default media control bar of the browser, pre -loaded the metadata of the video, the circular playback, the width of 900 pixels, the height of 240 pixels Essence
The first select the video address of the first source label, the SRC attribute value, the video category is OGG video, the video coding decoder is Theora, the audio coding decoder is VORBIS, the playback medium is the display; the second select the video address is no longer no longer the video address is no longer Tired. If you have to be compatible with IE, you can add the label set of the Flash player after the last source label, or use a little JavaScript code.
SummarizeThe above is a summary of the method of inserting the video in the HTML webpage introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!