What is this site?

HTML5Labs is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps us have informed discussions with developer communities, and enables us to provide better feedback on draft specifications based on this implementation experience. To find out more about HTML5Labs, read the blog by Jean Paoli, President, Microsoft Open Technologies, Inc.

Video Captioning

Media accessibility is an important aspect of the HTML5 specification. Soon web developers will be able to add captioning to HTML5 videos with the new HTML5 track element - all they need to do is point to a caption file that contains a written representation of the dialog or actions in the video.

With this new functionality there is now no need for external add-ons to publish accessible video content.

The following HTML fragment shows how the track element works:

1: <video>

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

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

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

5: </video>


The W3C HTML5 specification allows multiple caption formats. The Internet Explorer 10 Platform Preview released at our recent Build conference does not currently support any particular captioning format, but that will change in a future release.

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. Though the <track> element is present in the BUILD release of IE10, it is not fully enabled yet. However, we can use the current spec to start working on some prototypes.

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 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.

Try the demo now.