Article introduction of Wulin.com (www.vevb.com): HTML 5 Video Overview.
1 Video introduction
Quote the introduction text from my translated document "Embed Audio and Video in HTML5 Pages": Today, the only reliable way to embed videos on web pages and see them all users regardless of their browser or operating system is to use Flash. This requires the Adobe Flash plugin and combines the <object> and <embed> tags.
Most users already have Flash plugins installed (in fact, about 95% of Internet users have a certain version of Flash), but HTML 5 supporters are pushing for an open, video standard that doesn't require any plugins. This is the idea brought to HTML 5's new tag <video>, which provides a way to embed videos (and interact with them) without the need for private plugins like Flash.
Unfortunately, the video is not that simple. Not only does the browser need to understand the <video> tag, but also a necessary encoding and decoder to play videos. The obvious solution is only for the creators of HTML 5 specifications to choose a video codec and let every browser manufacturer execute it.
Anyway, that's what you recommend. At the same time, this is also the fuse that causes chaos. The debate over a variety of codecs is already very annoying, but the more tragic thing is that browser manufacturers cannot reach a unified end. Apple is reluctant to use the proposed Ogg Theora codec, but Opera and Mozilla are also unwilling to pay for the licensing fees due to their browsers loading the H.264 codec. Google supports both, and Microsoft is far behind the debate because it has no plans to support HTML 5 video elements at all.
Faced with the stalemate of browser makers, HTML 5 well-intentioned dictator Ian Hickson shook his hand and said fucking. Therefore, there is no specially named or specified video encoding codec in the HTML 5 specification. OK, quote here.
The situation is that Microsoft is finally trapped, but tragically, it only supports H.264 in IE 9. At the same time, Google finally released the open source video encapsulation format webM and video encoding format VP8 at the I/O conference. Opera, Mozilla, and Chrome announced that they will fully support VP8, and IE announced that some support (a plug-in is required, but if I remember correctly, one of the visions of HTML5 is to leave the browser plug-in, which is really tragic for Microsoft).
Apple decided not to support VP8. Jobs believes that VP8 is not as good as H.264 in terms of quality or efficiency and cannot meet the requirements of its products. In addition, the latest news shows that VP8 may also involve patent issues (if the patent is really infringed, Opera and Firefox will probably ignore VP8 immediately).
Having said so much, in the end, if you want to use the <video> tag on the page, you need to consider three situations: those that support Ogg Theora or VP8 (if nothing happens to this thing) (Opera, Mozilla, Chrome), those that support H.264 (Safari, IE 9, Chrome), those that do not support (IE6, 7, 8).
Well, now let's understand HTML 5 videos from a technical level, including the use of <video> tags, media properties and methods that video objects can use, and media events.
2 Video tag usage
The Video tag contains several attributes such as src, poster, preload, autoplay, loop, controls, width, height, etc., as well as an internally used tag <source>.
In addition to the <source> tag, the Video tag can also include the content returned when none of the specified videos cannot be played.
2.1 src attribute and poster attribute
Can you imagine what the src attribute is used for. Like the <img> tag, this property is used to specify the address of the video.
The poster attribute is used to specify a picture and display it when the current video data is invalid (preview image). The invalid video data may be because the video is loading, it may be because the video address is wrong, etc.
2.2 preload attribute
This property can also be used by name, which is used to define whether the video is preloaded. There are three optional values for attributes: none, metadata, and auto. If this property is not used, the default is auto.
None: No preloading. Using this property value may be that the page maker believes that the user does not expect this video, or reduces HTTP requests.
Metadata: Partially preloaded. Using this attribute value means that the page maker believes that the user does not expect this video, but provides the user with some metadata (including size, first frame, track list, duration, etc.).
Auto: All preloaded.
2.3 autoplay attributes
Another attribute that knows its use according to the name. The Autoplay property is used to set whether the video is automatically played, and is a Boolean property. When it appears, it means automatic playback, and removing it means that it does not playback automatically.
Note that the values of the Boolean attribute in HTML are not true and false. The correct usage is to use this attribute to represent true in the tag. At this time, the attribute either has no value or its value is always equal to its name (here, the automatic playback is <video autoplay /> or <video autoplay=autoplay />); while this attribute is not used in the tag to represent false (here, the automatic playback is <video />).
2.4 loop attributes
It is clear at a glance that the loop attribute is used to specify whether the video is played loop, and it is also a Boolean attribute.
2.5 controls attribute
The Controls property is used to indicate to the browser that the page maker does not use scripts to generate the playback controller, and the browser requires the browser to enable its own playback control bar.
The control bar must include playback pause control, playback progress control, volume control, etc.