An introduction to HTML5 Video

As the latest web browsers gradually provide increasing HTML5 support, developers are getting more excited about the possibilities this provides. The new video tag in particular is gaining a lot of attention, and in theory should make it easier to add video content to your website. Things can get even more interesting when you start using CSS and JavaScript to enhance the video experience. However, due to varying implementations across browsers things aren't quite perfect. When it comes to coding, the video tag works in a very similar way to the existing image tag. Here's a simple example: HTML 5 does not follow the strict XML-based rules of XHTML4, so closing tags and attribute quotations are not required. For example, the following two lines are both valid HTML5: As the second example above shows, the video source file can either be used as an attribute of the video element or as its own tag nested between the opening and closing video tags. The advantages of this approach will become clear later. The examples also show that you can set the height and width of a video like you can for an image. The controls attribute displays the basic video playback controls people are used to - play/stop, time, volume. Each HTML5-supporting browser has their own way of displaying these controls. Other video tag attributes include autoplay, loop, preload and poster. As with controls, support for these attributes varies across browsers. For example, the poster attribute allows you to assign an image file to a video to be displayed in the player before it starts and while it's loading. Whilst this is a very useful attribute it is not fully supported on the iPad or iPhone (oddly, it works if you include the source file as an attribute but not if it's a tag). Already you can see the pros and cons of the video tag. The basic markup and theory is simple and very useful, but we're already seeing browser inconsistencies. Which brings me to my next point - the video files themselves. Annoyingly, no default video file type has been defined for HTML5, leading to each browser making their own decisions on which codecs to support. These positions can be argued as being ideologically or financially motivated - either way, this means bad news for developers. Maybe we took the image tag for granted, as the major image file types were supported by all the main browsers (bar some PNG display issues in IE6). With the video tag there are several different formats vying for support. The three main players so far are the following;

  • H.264
    File types:
    .mp4, .m4v
    Browsers: Safari 3+, Chrome 5+, Internet Explorer 9+, Android 2+, iPhone 3+
  • Theora Ogg Vorbis
    File type:
    Browsers: Firefox 3.5+, Chrome 5+, Opera 10.5+
  • WebM
    File type:
    Browsers: Firefox 4+, Chrome 6+, Opera 11+, Internet Explorer 9+ (if user has codec installed on their local machine)

Each format has their own champions and objectors. The H.264 codec provides good quality video at a reasonable file size, however there are licensing issues involved which keep the staunchly open source Firefox and Opera from using it. Instead they are supporting the Theora codec, which does not demand royalty fees. WebM is another codec that, since Google took charge of it, is now royalty-free. It is not widely supported at the moment, but may see wider support in the future. In the early stages of HTML5 at least, developers will have to create several files to support them all (unless developing for a specific environment, e.g. the iPad). This is where the source tag from earlier comes into play. You can place multiple source tags in-between the opening and closing video tags. This allows the browser to skip to a source tag that contains a file format it supports. So should developers start using the video tag? It really depends on the project, especially when it comes to audience requirements. But being able to treat a video as a HTML element and play with its appearance and functionality using CSS and JavaScript will be a great development incentive. Just expect a few headaches and a lot of browser testing along the way! Useful links: