This article is In Progress.
W3C Candidate Recommendation
video tag allows a developer to embed a video in a document. It is new to HTML5. Different browsers have various format support
Native video playback without plugins
Browsers that support HTML5 video will play the media without the need for external plugins. We no longer need to have Flash installed in order to play video on browsers that support HTML5 video.
The video formats is made up by a
video stream +
The three main formats for HTML5 video are: MP4, WebM and OGG Vorbis.
.mp4 = H.264 + AAC .ogg = Theora + Vorbis .webm = VP8 + Vorbis
Server MIME Types
Addition to declaring multiple encodings, the web server also needs to be instructed on the association between MIME types and co
The attributes (controls, preload, loop) go inside
<video> tag to change the behavior of the embedded video.
What about old browsers?
There are several techniques to ensure that people will be able to access the content we've created. I will cover two of them in this article: Chrome Frame and Flash Fallback
[Frame] is a plugin for Internet Explorer (up to version 8) that will allow the older browsers to work with HTML5 content (not just video and audio) as if it supported the features natively.
You can also use flash as a fallback for when the browser does not support any of the provided formats. Flash supports H264 and Adobe has committed to support the WebM format in their flash player although that time timeline is still not clear. The biggest drawback using Flash as opposed to the Chrome Frame plugin is that you will get the flash player interface instead of whatever UI you built for your video tag. The details of this technique can be seen in the Quick Guide to Implementing the HTML5 Audio tutorial.
<video width="320" height="240" controls="controls" preload="none"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
Desired video file should be within src attribute. As a best practice you should also include the controls attribute to show playback and volume controls
<video src="video.webm" controls="controls"></video>
View live exampleHTML5 Video Tag can support different encodings
<video>Your browser does not support the
videoelement. You can download it <a href="video.webm">here</a>.
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.6
|HTML5||W3C Candidate Recommendation|
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic Support||3||3.5||9|| 10.50
|MP4 (H.264 + AAC)||3||Unsupported||9|| Unsupported
|Ogg (Theora + Vorbis)||3||3.6||Unsupported|| 10.50
|WebM (VP8 + Vorbis)||6||4||Unsupported|| 10.60
|Feature||Android||BlackBerry||Chrome for mobile||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Opera Mini||Safari Mobile|
|Basic Support||2.3||7.0||18||4||9.0||11||Unsupported|| 3.2
|MP4 (H.264 + AAC)||2.1||4.6||18.0||18.0||9.0||11.5||Unsupported|| 3.2
|Ogg (Theora + Vorbis)||Unsupported||Unsupported||?||?||Unsupported||?||?|| Unsupported
|WebM (VP8 + Vorbis)||2.3||?||?||?||Unsupported||?||?||Unsupported|
|Chrome||Google has announced that H.264 support will be removed from Google Chrome in the future.|
|Internet Explorer||9+||Beginning with Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video. WebM audio and video files can be supported by installing the WebM components from The WebM project.|
|Safari||Safari requires QuickTime to play video.|
|Android||2.1 - 4.0||Requires specific handling to run the video element to suport MPEG-4/H.264|
|Firefox||Last versions of Firefox support MPEG-4/H.264 on Windows Vista, Windows 7, Windows 8, Linux, last versions of Android, and soon everywhere |
- [Video Chapter] from Dive into HTML5
- [Videos for the Web with HTML5 - an Introduction] convert videos into HTML5 format using ffmpeg or a GUI-frontend
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]