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>
Features Chrome Firefox Internet Explorer Opera Safari Basic support autoplay attribute buffered attribute controls attribute crossorigin attribue loop attribute muted attribute played property poster attribute preload attribute src attribute
Features Android Firefox Mobile IE Mobile Opera Mobile Safari Mobile Basic support autoplay attribute buffered attribute controls attribute loop attribute muted attribute played property poster attribute preload attribute src attribute crossorigin attribute
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|
- [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]