How To Use The HTML 5 Video Element

Thankfully in the new HTML 5 specification there is now a video element. This plugs into your browsers native video playing support to play the video. Overall this means better playback & the ability for web developers to do some clever things with the videos. How? Well as the videos are being played by the browser you can access all of the playing abilities through the DOM (Document Object Model), you can also apply other effects such as opacity & rotation. Enough of that though. Let’s look at the basics of how to use the video element.

Using The Video Element

Using the video element is fairly easy. Let’s take a look at a basic usage:

There we have it. Unfortunately it isn’t quite that simple.

Browser Codec Support

While it would have been extremely nice to have a common codec throughout all the major browsers this isn’t the case. Here is a list of the browsers & the codec/s they support:

• Firefox (3.5+): Theora/Vorbis/Ogg
• Opera (10+): Theroa/Vorbis/Ogg
• Chrome (4+): Theroa/Vorbis/Ogg & H.264/AAC/MP4
• Safari (4+): H.264/AAC/MP4
• IE (9): H.264/AAC/MP4

Practical Examples

Let’s take a look at a more practical example of the video element:

This is the HTML used to make the example you can see a little further down. As you can see there are a few extra attributes compared to the previous example. A width & height are obvious attributes, controls tells the browser to show it’s playing controls, and preload instructs the browser to start downloading the video (not play it) as soon as the page is loaded.

The source element is used to add additional sources to a video element. Since there isn’t one video codec that will work in all of the browsers, you need to encode to more that one codec. The best solution is probably Theroa/Vorbis & H.264/AAC. Beware though, H.264 is a licensed codec & IS NOT free. Normally a license is required to broadcast videos encoded in the H.264 codec, however it was free to broadcast via the internet until December 31st, 2010. This has just been extended till December 31st, 2015.

An important part of the source element is the type attribute. This is used to tell the browser what kind of video it is. This is important because it saves the browser time in that it doesn’t have to figure it out itself. If the browser reads the type & it knows it can’t play it, then it won’t download any part of it. This saves the end user & you bandwidth. The type is split into the video container (in MIME format), and then the codecs used to encode the video, then audio. If you are trying out HTML 5 video & you are using the same codecs as I, then feel free to copy them. If not you can use this fairly comprehensive list of video/audio codecs.

Example

Here is an example of the video tag in action. This video is held under Creative Commons BY-NC, and was taken by Lisa-Marie & I.

If you are using Firefox or Opera, you will be served the Theora/Vorbis version. If you are using Safari or IE9 you will be served the H.264/AAC version. If you are using Google Chrome, both are compatible but it will serve you the first one in the source list (in this case Theora/Vorbis).

An Important Note

Right at this moment in time the preview version of Internet Explorer 9 doesn’t actually support the video element. However it has been stated by the IE development team that H.264 support will be in the final version. Also as Colin has pointed out (in the comments) for some reason the latest version of Firefox (3.6.3 to date) is showing the video & the incompatibility text, I’m guessing this is a bug as Chrome/Safari show it fine.

Other Attributes

There are two other attributes for the video element that I didn’t cover earlier. These are the autoplay and the loop attributes. These both do exactly what they sound like they do. Autoplay tells the video to play as soon as possible, and loop tells the video to start again when it reaches the end, as opposed to stopping.

Degradation

One of the greatest features of the video element is that any elements inside that do not match the source element are automatically ignored by HTML 5 (video element) compatible browsers. So you can place a flash video player in there for older browsers such as Internet Explorer 6, 7, or 8.

I hope this little look at the HTML 5 video element has helped show what a powerful little tool it is. Who knows maybe we’ll all be watching YouTube without Flash soon… Not likely, but we can dream. As always if you you any comments, suggestions, or tips to add let me know via the comments.

AACH.264HTMLTheoraVideoVorbis