HTML5 Video Elements

One, video file format
The HTML5 supports three video file formats (i.e. codecs).
? 1, Ogg Theora uses the file extension . ogg or. OGV, and the browsers that support it include firefox3.5+, Chrome 4+, Opera 10.5+, and Firefox for Android.
? 2. MP4 (H. 4) uses a file extension of . mp4 or. m4v, the browser that supports it includes the Safari 3.2+, the Chrome-? (see Tips), Internet Explorer +, IOS (Mobilesafari) And Android 2.1+, Android version of Chrome, Android Firefox and Operamobile 11+.
? 3, WebM uses a file extension of . WebM, and browsers that support it include Firefox 4+, Chrome 6+, Opera 10.6+, android2.3+, Android Chrome, Android version of Firefox and Opera Mobile 14.

PS:HTML5 also specifies a new file format, WEBVTT (Web video text track, a web-audio tracks) to contain text captions, titles, descriptions, chapters, and other video content. The WebVTT specification is still in the process of being developed, so the way it is set up with headings and other content may change in the future.

Second, set MIME type
In some browsers, if the correct MIME type is not set, the media file will not play.
This is the MIME type that can be added in the. htaccess file (You can edit the file using a text editor).
AddType Video/ogg. OGV
AddType video/mp4. mp4
AddType VIDEO/WEBM. webm
AddType Audio/ogg. ogg
AddType Audio/mp3. mp3

Iii. Adding a single video to a Web page
<video src="My-video.ext"controls AutoPlay muted loop poster width (default is 300px) height (default is 150px) preload></video>
Poster(poster) = = = Specifies the image to display when the video is loaded (without displaying the first frame of the video). Accepts the URL of the desired image file.
Preload (video pre-load) ===== tells the browser how much video content to load. Can be the following three values: None means that no video is loaded; metadata means that only the metadata of the video is loaded (such as length, size, etc; auto means that the browser decides what to do (this is the default setting)

Block Video preloading
If you think the user is less likely to watch a video, such as the video is not the main content of the page, then you can tell the browser not to preload the video. This saves bandwidth, especially for mobile device users.
1) for videos that have the preload= "none" set, the browser displays the video in a different way before the video is initialized.
2)the default value for preload is auto. This gives the browser the expectation that the video will be played by the user, so that the video can quickly get to the playback state. The browser will preload most of the video or even the entire video.
3) preload= "metadata". Doing so allows the browser to get only basic information about the video, such as size, duration, or even some key frames. The browser does not display a white rectangle until it starts playing, and the size of the video will be the same as the actual size.
Using metadata tells the browser that the user's connection is not fast, so you need to preserve the bandwidth resources as much as possible without interfering with playback.

Iii. Use of multiple sources of video and alternate text
To get support for all compatible HTML5 browsers, you need to provide at least two video formats: MP4 and WebM. Typically, the source element is used to define more than one media element, and a video element can contain any number of source elements.

The browser loads the first file format referenced by the source element it supports, and ignores other sources. Browsers that cannot play HTML5 videos will display alternate links in the messages you provide or can also place video or other content.
Example:

<video width= "369" height= "208" controls>　　
<source src= "Paddle-steamer.mp4" type= "Video/mp4" >
<source src= "PADDLE-STEAMER.WEBM" type= "VIDEO/WEBM" >
<source src= "PADDLE-STEAMER.WEBM" type= "Video/ogg" >
<p><a href= "Paddle-steamer.mp4" >download the video</a></p>
</video>
The properties of source are:

SRC (URL of the video source)

Type (used to specify the kind of video to help the browser decide if it can play the video)

Media (used to specify CSS3 media queries for video sources, so you can specify different (for example, smaller) videos for devices with different screen sizes)

　　the same media specifies how multiple sources work: when the browser discovers the video element, it first checks to see if the element itself has SRC defined. If not, the source element is checked. The browser will look at these sources one after the other until it finds a source that it can play. Once this is found, it is played and the other sources are ignored.

"Reference Resources":
1, you can find some free video in www.bigbuckbunny.org/index.php/download/for testing the video and source elements. The site does not have video in WEBM format, but you can format the conversion using the tools provided in section 17.2.
2. Ian Devlin's HTML5 multimedia:develop and Design (Peachpit Press, 2011) has a chapter that specifically demonstrates how to create a personal accessible control set and use WebVTT. http://net.tutsplus.com/tutorials/html-csstechniques/an-in-depthoverview-of-html5-multimedia-and-accessibility/excerpts from some chapters of this book.
3. Terrill Thompson compared the various browsers to HTML5 video accessibility support, see http://terrillthompson.com/blog/366
4. Further discussion on WebVTT and subtitles is beyond the scope of this chapter, but more information can be found in www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles
5. Convert file Format tool:? A, Mirovideoconverter (www.mirovideo-converter.com)? B, handbrake (http://handbrake.fr)

HTML5 Video Elements