HTML5 video is an element introduced in the HTML5 draft specification for the purpose of creating a standards-compliant, plugin-free way for playing videos and movies, partially replacing the object element.
HTML5 video is an element introduced in the HTML5 draft specification for the purpose of creating a standards-compliant, plugin-free way for playing videos and movies, partially replacing the object element.
Basic usage
You can embed a video element into a HTML5 document by using the following code:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>Your browser does not support the video tag.</p>
</video>
Attributes
The video element has the following specific attributes:
srcgives the address of the media resource to showcrossoriginis a CORS settings attributepostergives the address of an image file that the user agent can show while no video data is availablepreloadsets the preload behavior, valid values beingnone,metadataandautoautoplayis a boolean attribute. When present, the user agent will automatically begin playback of the video as soon as it can do so without stoppingmediagroupcan be used to link multiple media elements together by implicitly creating a MediaControllerloopis a boolean attribute that, if specified, indicates that the media element is to seek back to the start of the media resource upon reaching the endmutedis a boolean attribute that controls the default state of the audio output of the media resource, potentially overriding user preferencescontrolsis a boolean attribute that, if present, indicates that the author has not provided a scripted controller and would like the user agent to provide its own set of controlswidth&heightspecify the dimensions of the element in pixels
JavaScript API & Events
The HTML5 video element can be easily controlled from JavaScript.
For example you can easily pause and play a video by doing the following:
document.getElementsByTagName('video')[0].play();
document.getElementsByTagName('video')[0].pause();
It also has properties:
var time = document.getElementsByTagName('video')[0].currentTime; //will return the current position of the playhead
And it also fires events:
document.getElementsByTagName('video')[0].addEventListener('ended',function(){
alert('That\'s all folks!');
},false);
For a wonderful overview refer to the demo page of the W3.
Media Encoding
Browser vendors all support different codec and container formats, so you should encode your video more than once and serve several files simultaneously to ensure your visitor will be able to watch them. A common approach (at the time of writing, i.e. spring 2012) is to serve the following:
- Make one version that uses WebM (VP8 + Vorbis)
- Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container
- Make another version that uses Theora video and Vorbis audio in an Ogg container
Be aware that this is CONSTANTLY CHANGING, so before you set up your video do research on what is currently supported and what the future outlook does look like!
Flash & Download Fallback
Since video is still unsupported in many browsers used (IE 7+8 for example) it should be considered a good idea to serve Flash Video as a fallback. For browsers that cannot play any video at all you can also serve a link to a simple download.
This can be done by adding the traditional object style Flash content into the fallback part of the video element:
<video controls poster="video.jpg" width="854" height="480">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
<object type="application/x-shockwave-flash" data="player.swf" width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=video.mp4">
<!--[if IE]><param name="movie" value="player.swf"><![endif]-->
<img src="video.jpg" width="854" height="480" alt="Video">
<p>Your browser can’t play HTML5 video. <a href="video.webm"> Download it</a> instead.</p>
</object>
</video>
FAQ (on StackOverflow)
- HTML5
<video>callbacks? - How do you detect HTML5 video events?
- HTML5 video behavior on mobile devices
- Start HTML5 video at a particular position when loading?
- Can you display HTML5
<video>as a full screen background?
Available libraries
There are many JavaScript libraries that offer tools to handle tasks (and fix cross-browser issues) that you will encounter when using the video-element. These are a few (if you know anything else feel free to add them):
Tools for encoding video
Further reading
- Dive into HTML5: Video
- Video for Everybody
- Simple HTML5 video player with Flash fallback and custom controls at dev.opera
- Using HTML5 audio and video at MDN
- The video element at w3.org
Attributions & Notes
This tag-wiki was compiled with the help and contents of Dive into HTML 5, dev.opera.com, w3.org and the MDN. In case anyone has vast experience regarding HTML5 video and mobile devices I think this would be a great addition to this wiki page!
