HTML5 Video Captioning

  • Article

The promise of HTML5 is a Web that works for everyone. Media accessibility through captioning is an important part of that promise and an area that is still emerging through standards work. Using the proposed HTML5 track element, developers can add captioning to HTML5 video by pointing to a caption file that contains a written representation of the dialog or actions in the video. Once the standards for captioning converge, there will be less need for external add-ons to publish accessible video content.

Still image from a video showing captions

The following HTML fragment shows how the track element works:

<video>

<source type="video/mp4" src="video_file" >

<track src="captions_file" label="English captions" kind="captions" srclang="en-us" default >

<track src="descriptions_file" label="English description" kind="descriptions" srclang="en-us" >

</video>

The W3C HTML5 specification allows for multiple caption formats. Internet Explorer 10 in the Windows Developer Preview supports the <track> element, but does not download or display any caption files yet. We use this implementation to prototype how different caption formats can be supported.

Last year at the W3C TPAC meeting, media accessibility was discussed with a proposal for the accessibility requirements that HTML5 should support. Recently, a Web Media Text Tracks Community Group was created to further work on captioning solutions for the Web.

Even though we are not yet at the stage of a final HTML5 spec, it is stabilizing. In order to provide better feedback on <track> and caption file formats, the Internet Explorer and TwC Accessibility teams partnered to build a prototype that uses the element to display captions and descriptions on a video.

We wanted to test a scenario were multiple formats are used to gather more feedback, so we built the demo in such a way that both TTML-1.0 and WebVTT can be used. WebVTT originated from W3C discussions last year after a need for simple caption authoring was identified. TTML is already an established standard for full-featured video captioning and supported in Adobe Flash and Microsoft Silverlight. It is used on Netflix, Hulu and other sites that display broadcast content.

Screen shot of the prototype that displays TTML and WebVTT video captions and descriptions

The prototype uses the video and track elements to show how TTML and WebVTT formats can be used to enable captions and descriptions on a video playback. The prototype supports all HTML5-enabled browsers.

You can interact with the prototype at the HTML5 Labs site. Use View Source or your browser’s developer tools to inspect the Javascript that parses the TTML and WebVTT formats.

As always, we welcome your feedback.

—Frank Olivier, Senior Program Manager, Internet Explorer