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" />
</object>
Yuck. And as you know, you need Flash for this. Or it is often delivered via JavaScript as well so it is not perfect.
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>
Autoplay
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.
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.
preload
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 usepreload
on its own, this defaults topreload="auto"
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.
Poster
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.
Controls
Adding this attribute means you can use your own play/pause/etc buttons for your video.
Subtitles
Subtitling is provided with the <track>
element and a webVTT file.