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;
File types: .mp4, .m4v
Browsers: Safari 3+, Chrome 5+, Internet Explorer 9+, Android 2+, iPhone 3+
- Theora Ogg Vorbis
File type: .ogv
Browsers: Firefox 3.5+, Chrome 5+, Opera 10.5+
File type: .webm
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.