Create accessible videos with HTML5

With HTML5 it’s been possible to add video content to a web page without a plug-in for a while now. HTML5 also makes it easier to provide alternative formats for your content.

The <video> element embeds multimedia content into the page. At its most simple, it uses the src attribute to point to the video source file.

<video src="movie.webm" controls></video>

When present, the controls attribute indicates that the browser should display its own set of UI controls for functions such as play/pause. If you script your own set of UI controls, the attribute provides a fallback when scripting is disabled in the browser. You can also provide fallback content for legacy browsers. This might be static text, a link to download the video file, or advice on how to upgrade to an HTML5 aware user agent.

<video src="movie.webm" controls>Fall back content for legacy browsers.</video>

The poster attribute can be used to display a static placeholding image. There is still some discussion about the way poster is handled within the HTML5 specification, but for now it’s an attribute of the <video> element itself.

<video src="movie.webm" poster="image.jpg" controls>Fall back content for legacy browsers.</video>

The <track> element is a child of the <video> element used to point to an external timed text file providing supplementary information for the video. It uses the kind attribute to specify which type of information to provide.

• Subtitles (default): gives dialogue translation when sound is not understood.
• Captions: full audio transcription when sound is unavailable or can’t be heard by the viewer.
• Descriptions: transcription of visual content for conversion into synthetic speech.
• Chapters: provides a navigation mechanism for browsing the video content through an interactive list in the UI.
• Metadata: used to provide access to tracks for use with scripts.

<video src="movie.webm" poster="image.jpg" controls><track kind="captions" src="captions.vtt">Fall back content for legacy browsers.</video>

This example uses the Web Video Text Tracks (Web VTT) format to provide the captions file. Web VTT enables you to map a time cue to a piece of text (transcribed from the original sound dialogue). Tom Leadbetter explores Web VTT in more detail on the HTML5 Doctor website.

The <video> element is supported in all current browsers. Sadly, support for the <track> element and Web VTT lags behind. Browser vendors are working on both though, so it won’t be long until we’re closer to truly inclusive HTML5 video.