Adding video to your website with HTML5

In the first of his blogs for PC Pro, web developer Ian Devlin reveals how to embed video into your website with HTML5

Probably the biggest and most talked about feature of HTML5 is embedded video. Currently, the only method of adding video content to your website is with a third-party plugin such as Flash, QuickTime or RealPlayer. With the dawn of HTML5 and the video element this will all change, with video support being handled by the web browser, doing away with the need for any third party support.

Several web browsers already offer support for HTML5. Here we’re going to reveal how you can embed plugin-free video into your site and the issues you’ll face.

File types and browser compatibility

To begin with, we’ll briefly take a look at the different video file types that are supported in HTML5. These are Theora OGG and H.264 (.mp4). Different browsers support different types, and some support none at all. The following table indicates this:

	Theora OGG	H.264 (mp4)
Firefox 3.5+	✓	x
Chrome 3+	✓	✓
Safari 3+	x	✓
Opera 10.5+	✓	x
Internet Explorer 8	x	x
Internet Explorer 9	x	✓
iPhone	x	✓
Android	x	✓

Codecs and other technical issues

HTML5 itself doesn’t specify a video codec to use, and this has led to arguments as to which is the best to use for the web. So to cover all browsers, we have to support both codecs.

And then of course there’s Internet Explorer. At the moment, none of the released versions of Internet Explorer support the video element and a plugin is still required to play video. This will change with the release of Internet Explorer 9 (likely early next year), when H.264 will be supported, along with many other HTML5 goodies.

In case you’re wondering how, you can convert your video files to OGG (you can read more about the Theora OGG type over at the TheoraCookbook) files using the Miro Video Converter.

For further in-depth information on the video element and codecs, head over to the dive into html5: video on the web by Mark Pilgrim.

HTML5 code

Now we move onto the actual HTML5 code and how we can get the thing to work. HTML5 provides us with two new elements that we can use to add video to our web pages: the <video> element, which we’ve already mentioned, and the <source> element. Let’s look at each of these in turn.

The <video> element

The video element can have the follow attributes:

Attribute	Description
src	a valid URL to the video file itself
autoplay	a boolean indicating whether the video should be played automatically
controls	a boolean indicating that the default media controls should be displayed by the browser
loop	a boolean indicating whether the video should be played repeatedly
preload	indicates to the browser whether pre-emptive downloading of the video itself is required, or if metadata alone is all that’s needed. Possible values are: 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

From this, it can be seen how easy it is to embed an OGG video into your website using the video element alone:

<video src="myVideo.theora.ogg" autoplay controls></video>

That’s really all there is to it.

Any browser that supports the Theora OGG format should now successfully display and play your video without further ado. Of course it’s not as easy as that,  because as we have seen from the table above, the code would only work in Firefox, Chrome and Opera. So we need to have a fallback to H.264 as well. This can be achieved using the <source> element, which allows us to define multiple media sources for the video element.

The <source> element

The source element has the following attributes:

Attribute	Description
src	a valid URL to the media (in this case video) file itself
type	the type of the media file which must be a MIME type, e.g. type="video/ogg" indicates that it is a Theora OGG video, and you can also provide the MIME codec to help the browser to decide how to play the video by using type='video/ogg; codecs="theora, vorbis".
media	gives the intended media type of the media resource and must be a valid media query, e.g. media="handheld" indicates that the video is suitable for handheld devices or media="all and (min-device-height:720px)" which indicates that the video is appropriate for screens of 720 pixels or more.

Note: that the source element is void and has a starting tag but no closing tag

The most useful thing about the the source element is that we can use it to stack the different file types, allowing the browser to try each in turn until it finds one that it can play.

Using <video> and <source> together

In order to stack videos in the different types within the video element, we enter the code as follows:

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

The above code will now work in all browsers except Internet Explorer, which will display the message indicated above.

You can test this yourself by viewing the HTML5 Test Video page, which contains a sample video of a butterfly in both Theora OGG and MP4 format, so if you’re viewing this in Firefox, Chrome, Safari, Opera or on the iPhone or an Android handset, you should be able to view it.

The sharp knives amongst you will now noticed that we can take advantage of this stacking and have a fallback to Flash (or some other plugin) at the bottom instead of displaying a “sorry you can’t see this video” message, by using the following code:

<video autoplay controls width="512" height="300">
<source src='myVideo.theora.ogg' type='video/ogg; codecs="theora, vorbis"'>
<source src='myVideo.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=myVideo.flv&autoStart=true">
<param name="movie" value="flvplayer.swf?file=myVideo.flv&autoStart=true" />
<param name="wmode" value="transparent" />'
</object>
</video>


Conclusion

As with most HTML5 elements, browser support for the source and video elements is currently patchy. There’s also a large debate going on at the moment as to whether the source  element will kill the usage of Flash as the most popular method of adding video content to websites. I’m not sure it will kill Flash 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 embedding video.