Video tag in HTML 5

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 use preload on its own, this defaults to preload="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.