The experiment

Probably the biggest and most talked about feature in HTML5, is the addition of browser video support through the <video> element. Currently, in order to play a video file within a web page web developers mainly have to resort to embedding an Adobe Flash™ video file within the code. With the introduction of the <video> element, this will change.

The process

The <video> element is very similiar to the <audio> element with regards to the attributes that are available to it:

• src — a valid URL to the video file itself
• autoplay — a boolean indicating whether the video should be played automatically
• loop — a boolean indicating whether the video should be played repeatedly
• controls — a boolean indicating that the default media controls should be displayed by the browser

As well as these, there are some additional attributes available to the <video> element:

• preload — indicates to the browser whether optimistic downloading of the video itself is required, or if metadata alone is all that's needed. Possible values are as follows:
  • none — indicates that the video is not to be preloaded (as it probably won't be required)
  • metadata — the video is probably not going to be required but it's metadata (e.g. dimensions, duration) is desirable
  • auto — informs the browser to attempt to download the entire video
  • (empty string) — means the same as auto
• poster — the URL to an image file to be displayed when no video data is available.
• width — the width of the video, in CSS pixels
• height — the height of the video, in CSS pixels

So, from that, the following HTML would automatically play the file upc-tobymanley.theora.ogv, and provide some default media controls:

<video src="upc-tobymanley.theora.ogv" autoplay controls></video>

You can see a working example of this, as long as you're using a browser that supports the HTML5 <video> element. The table below displays the current support for the <video> element amongst today's browsers (as of 5th April 2010).

The first thing to notice about this table is that there are only two file types that are supported by the <video> element, OGG and MP4. The reasons for this are varied and are still being argued about elsewhere on the web and are not relevant here.

That said, you may be wondering how to convert your video files to OGG (you can read more about the OGG Theora type over at the TheoraCookbook) files via the Miro Video Converter, which is free.

As the table shows, most of the major browsers (barring Internet Explorer) support playing of a video file through HTML5's <video> element. Like the <audio> element, you can also make use of the <source> tag in order to stack the different file types allowing the browser to try each (in this case there's only two) one until it finds one it can play. This can be done as follows:

<video autoplay controls width="512" height="300">
  <source src='upc-tobymanley.theora.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <source src='upc-tobymanley.mp4' type='video/mp4; codecs="mp4v.20.8, samr"'>
  Your browser does not support the <code>video</code> element.
</video>

This code can be tested in your browser and show you that if either of the files cannot be played, e.g. in the case of Internet Explorer, a message will be shown advising this.

In place of this message you could embed an Adobe Flash™ version of the file in order to provide a "catch all" fallback for Internet Explorer:

<video autoplay controls width="512" height="300">
  <source src='upc-tobymanley.theora.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <source src='upc-tobymanley.mp4' type='video/mp4; codecs="mp4v.20.8, samr"'>
  <object type="application/x-shockwave-flash" width="512" height="300" wmode="transparent" data="flvplayer.swf?file=upc-tobymanley.flv&autoStart=true">
    <param name="movie" value="flvplayer.swf?file=upc-tobymanley.flv&autoStart=true" />
    <param name="wmode" value="transparent" />
  </object>
</video>

Test this code in Internet Explorer for yourself and see the results.

You may have noticed the use of the type and codec attributes within each source tag. These are used to provide the browser with further information on the video file in order to facilitate with playing it. More can be read about the different MIME types and codecs available in the W3C specification.

The results

As usual, browser support for this new element is currently patchy. There's also a large debate going on at the moment as to whether the <video> element will kill the usage of Adobe Flash™ as the method of adding video content to websites. I'm not sure it will kill it completely, but nevertheless I think it's fair to say that it's here to stay and will provide web developers with a cleaner, easier approach to adding achieving this.