Edited May 2014 to change deprecated
autobuffer attribute to
preload, warn against using
autoplay and update browser support.
The <video> element is new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.
It works in all modern browsers (IE9 and above).
The ‘old’ way
Ugh, look at this horrid code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
The HTML 5 way
Nice, clean, minimal code:
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls preload> <p> Try this page in a modern browser! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p> </video>
The video tag has an attribute that allows the video to play when the page loads.
<video src="abc.mov" autoplay> </video>
But autoplay is bad ok? Youtube and the like autoplay their videos. But before you push the launch button for your HTML 5 site, strongly consider whether it should autoplay a video; it’s especially annoying for those without headphones, and those using screenreaders. Mobile browsers generally ignore this attribute to prevent consuming data until user explicitly starts the download.
If the browser doesn’t know what to do with video tag, or if there is a display error, you should offer a download to the video instead, inside the video element.
The preload attribute is used when autoplay is not used. It is a hint to the browser whether to download some, all or none of the video before a user decides to play the video.
It takes one of three values:
preload="none"tells the browser not to download any of the video. This saves bandwidth.
preload="metadata"tells the browser to download metadata, such as length of the video or its format.
preload="auto"tells the browser to do as it sees fit. This may change depending on whether a device is on wifi, 3G, data roaming etc. If you just use
preloadon its own, this defaults to
In all cases, the browser takes this attribute as a hint, not a command. If both autoplay and preload are used, then preload is ignored.
Use the poster attribute to display a frame of the video (as a .jpg, .png, whatever), in case the video doesn’t load for some reason. It can be a local image or elsewhere on the web
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png"> <p>Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p> </video>
You should use the poster attribute because you don’t want the user to see nothing.
Adding this attribute means you can use your own play/pause/etc buttons for your video.
Subtitling is provided with the
<track> element and a webVTT file.
I won’t claim to be a video/audio codec expert but there are a few outstanding issues in this area, which this article does a good job explaining.
UPDATE: See Video: the track element and webM codec for more information about codecs.