CXO

How to use HTML 5's video tag

Justin James offers tips on using the HTML 5 <video> tag, including options for accessibility issues and browser support.</video>

One of the most exciting new features in HTML5 is the <video> tag, because it addresses a very common use case that currently is a headache (and potentially expensive) to deal with unless you are willing to put your content up on a site like YouTube. In addition to being free to use, the video tag is increasingly supported in browsers. For better or for worse, no video codec is specified by the HTML5 specification, which is the major drawback to using it, but it looks as though MPEG will be fairly well supported.

The first question you may have is, "What do I do about browsers that do now support <video>?" That is easily answered: the <video> tag may contain additional content, but browsers supporting <video> should not display it. This means that you can use the contents of <video> to have a reasonable default (a "can't display content" message, a Flash video player, an embedded YouTube object, etc.) that won't be displayed if the browser supports it.

Using <video> is not difficult at all, and in fact is a lot like using <img>. The basic attributes you should know about are src, width, and height, which all work as they do with <img>. You can use the poster attribute to specify the URL of an image to be used to display while the video content is loading. If you want the video to start playing when ready, add the autoplay attribute (you can either just use "autoplay" by itself, or "autoplay=autoplay"). To not use autoplay, either omit it entirely, or set it to false with "autoplay=""". You can use the same syntax with the "loop" attribute (to have the video automatically start over again when done) or the "muted" attribute (to have the sound shut off). Another useful attribute is "controls"; if this is true (again, just "controls" or "controls=controls" will set it to true, and leaving it out or "controls=""" will set it to false) then the browser will be responsible for displaying various controls; otherwise, you will need to make an interface in HTML and use JavaScript to manipulate the DOM to control the video playback.

The "preload" attribute is used to tell the browser if it should start to load the video before it starts to play. A value of "none" means that the browser should not preload at all, "metadata" tells it to load only the video's metadata, and "auto" allows the browser to get as much of the video as it wants ahead of time. If you set the value to "" then it will act as if you specified "auto." The HTML5 spec suggests (but does not require) that browsers use "metadata" if the value is not specified. You will want to definitely use a value here to ensure that the behavior is what you expect.

An interesting piece of the puzzle is the "mediagroup" attribute. By specifying a value for "mediagroup" you can have multiple <video> or <audio> elements tied to the same set of browser controls; when one plays, they all play, when one stops, they all stop. This is especially useful for providing alternative videos for accessibility. For example, you could have a secondary video that plays a series of text describing the main video for deaf users, and another with an audio track narrating the main video for blind users. An alternative to usability for the hearing disabled is the <track> element. You can use it to provide the browser with information on time track text files, which will provide captions, subtitles, etc. to be overlaid by the browser onto the video automatically.

As you can see, the <video> element makes it very easy to get your video content onto the Web, so long as your server can handle the load (use the "preload" attribute wisely). The big question mark in all of this is the codec situation, and it may require you to perform some user agent sniffing and manipulation of the src attribute (either on the server side or the client side via JavaScript) to determine which file to be used, based on the current codec support from each browser.

About

Justin James is the Lead Architect for Conigent.

Editor's Picks