The Useful Parts of HTML 5

The Video Tag

HTML 5 is still a long way from its first alpha release and has its ideas implemented by browsers simply so that those who want to be involved in the development of the new standard can try them out and provide feedback as to what is useful and what isn't. That in part explains why the current proposals for HTML 5 include two and sometimes three alternatives to do the same thing where obviously only one is required. There is also the situation where different browsers implement the same tag in different ways which means that you need a lot of extra code in order to cover all the alternatives.

A good example of this is the <video> tag.

HTML 4 had just one tag that could be used for displaying video in the web page and that tag required a suitable plugin to be installed in order for it to work. That tag is the <object> tag and the plugin it usually uses is Flash. Even though displaying video was defined as one of the purposes for the object tag way back in 1997 it was not until after Netscape 4 died and adjustments were made to Flash that being able to attach video using a single object tag became practical. Netscape 4 would only attach video using its own proprietary <embed> tag (which a lot of people forgot to remove from their web pages once the browser that required it died) and IE5 and IE6 running early versions of Flash required different attributes to be specified on the object tag making it necessary to nest two object tags so as to have one that would work in whichever browser was being used.

With Netscape 4 and IE5 dead and with very few people still running IE6 (and with most of those running a relatively recent version of Flash that allows it to work with the standard object tag. So now there is no reason for either nested object tags or to use the proprietary embed tag. With the embed tag having become unnecessary back in about 2005 it is difficult to understand why it is proposed for introduction into the HTML 5 standard as we already know that the standard will not be released prior to that. As embed offers nothing that isn't already offered by object and the object tag is supported by more browsers than the embed tag there is absolutely no benefit to reviving the embed tag unless you also propose to revive Netscape 4 (which would basically force people back to using HTML 3.2 as that browser doesn't support a lot of the CSS commands used with HTML 4).

The video tag is a completely different situation. Unlike the object and obsolete embed tags it doesn't require a plugin in order to be able to handle video. Instead the video tag will make use of a video player built into the browser itself and so will be able to play videos without requiring any plugins. This is advantageous for two reasons - one is that not everyone installs plugins into their browser (even such commonly required ones as flash) and some platforms don't support flash (eg Apple iPad).

The one part of the proposal for the video tag that is still far from being resolved is just which video codec(s) that browsers should support. The open source patent free format that would be the perfect solution doesn't exist and so different browsers are still experimenting with different codecs. The originally proposed alternative "video/ogg" has now fallen out of favour and only some of the earlier browsers to implement support for the video tag still use it.

The multiple codec issue can be handled by using multiple source tags with in the video tag. Properly functioning browsers will check the type specified on each source tag until they find one that they support and will then use that version of the video. The one or two browsers that currently don't properly test the type support the "video/mp4" format and so by specifying that one first we get around that particular problem.

Everything inside the video tag except for the source tags represents the fallback HTML for when the browser doesn't recognise the video tag and so by placing our standard object tag there we have a Flash fallback for those browsers that don't recognise the video tag.

The following HTML is what we need in order to be able to use this new tag right now.

<video  width="300" height="200" poster="movie.jpg" controls>
        <source src='movie.mp4'
type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
        <source src='movie.webm'
type='video/webm; codecs="vp8.0, vorbis"'>
        <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
        <object data="flashmovie.swf" width="300" height="200" type="application/x-shockwave-flash">
              <param name="src" value="flashmovie.swf">
              <param name="quality" value="high">
              <param name="bgcolor" value="#FFFFFF">
              <param name="wmode" value="transparent">
              <param name="pluginurl"
<p>Fallback content for browsers that don't support either video or flash goes here.</p>

Just as the convoluted combinations of an object tag with an embed tag (when IE5 and Netscape 4 were the latest browsers) or two nested object tags (so as to handle those using IE6 with really antiquated versions of Flash) are now no longer needed in order to use Flash video, the above code should be able to be greatly simplified by the time that HTML 5 gets to an alpha release status (or release candidate status as the W3C calls it). By then the flash fallback will probably be unnecessary and hopefully a standard codec will have been agreed upon so as to be able to produce just one version of the video instead of the four that the above code uses.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow