HTML5 Knowledge Base
Everything about HTML5 video tag, HTML5 supported video formats and HTML5 video supported browsers
The HTML 5 <video> tag is used to specify a video on an HTML document. For instance, you could embed a music video on your web page for visitors to enjoy it.
The HTML 5 <video> tag accepts attributes specifying how the video should be played, including preloading, autoloading, looping, etc.
Any content between the opening and closing <video> tags is fallback content. This content is displayed only by browsers that don't support the <video> tag.
The <video> tag was introduced in HTML5 (officially referred to as HTML5 - without any space). HTML5 video is quite widely implemented in the major browsers.
|<video>||Defines a video or movie|
|<source>||Defines multiple media resources for media elements, such as <video> and <audio>|
|<track>||Defines text tracks in media players|
|<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<p>This is fallback content</p>
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. If HTML5 <video> is not supported Flash should display, if Flash is not installed the images should display and the download links should play the video.
MP4 = MPEG 4 files with H264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Ogg = Ogg files with Theora video codec and Vorbis audio codec
HTML5 video can support all modern browsers, e.g. Safari5, Firefox4.0, Internet Explorer 9, Google chrome6, Opera10.6. That is to say HTML5 video is compatible with the latest version of browsers. If the browser is the old version, HTML5 video will be played back as flash.
The relationship between the three formats and the five browsers:
|Internet Explorer 9(IE9)||Yes||No||No|
|Google Chrome 6+||Yes||Yes||Yes|
|Apple Safari 5||Yes||No||No|
There are many popular video patterns on the video-sharing website, such as Flash video, Youtube video, Vimeo video, HTML5 video and so on.
Flash Video is viewable on most operating systems via the Adobe Flash Player and web browser plugin or one of several third-party programs. Apple's iOS devices (iPad, iPhone, iPod, etc.) do not support the Flash Player plugin, so that it requires other delivery methods provided by the Adobe Flash Media Server.
Viewing YouTube video on a personal computer also requires the Adobe Flash Player plug-in installed on the browser. There are always some ads overlapping the original videos, which is quite troublesome.
Vimeo supports High Definition playback in 1280x720 (720p). Uploaded HD videos were automatically converted into 720/30p VP6 Flash video. Nowadays, all Vimeo videos are encoded into H.264 for HTML5 support. Non-HD videos re-encode at a maximum of 30 frame/s and they also have significantly higher bitrates than other competing video sharing sites. Non-Plus users can upload up to 500 MB of videos per week, and up to one HD video per week (additional HD videos uploaded within the same week are encoded to SD).
HTML5 video is an element introduced in the HTML5 draft specifying for the purpose of playing videos or movies, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web without plugins or third-part programs. It succeeds to the advantages and overcomes the disadvantages of the mentioned videos above to some extent.