Export (0) Print
Expand All

Make your videos accessible with Timed Text Tracks

As a companion to the HTML5 video element, the Timed Text Track API provides the tools to add accessibility, translated transcripts, or extended content to your videos.

What is the Timed Text Track element?

The HTML5 track element is used with the HTML5 video element to add synchronized text tracks to video content. A timed text track can provide a text transcript for accessibility, language translations, or commentary on the video currently playing.

Timed text tracks at their simplest consist of in and out time markers or cues, and a line of text. Internet Explorer 10 supports a subset of two formats, Web Video Text Track (WebVTT) or Timed Text Markup Language (TTML). The timed text standard is emerging for timed text track formats, so Internet Explorer 10 and Windows Store apps using JavaScript currently support only timing cues and text. The TTML format is shared with the broadcast television world, by using a very rich feature set. However, for most web applications, the simpler versions can do fine.

In this section, you'll see how to create WebVTT or TTML format files with an online tool. You'll use those files to add simple captioning to an HTML webpage without scripting or additional software. Using JavaScript, you'll see how to incorporate the text captioning into your own page elements and style them to fit your own designs. Finally, you'll see how to use the metadata kind of track that lets you synchronize webpages and other content with your videos.

In this section

TopicDescription

Create WebVTT or TTML files with Caption Maker

Create your own WebVTT or TTML format files for use with Internet Explorer 10.

Getting started with the Track element

The HTML5 track element enables you to add captions that are displayed in the HTML5 video player, without scripting or additional software.

Scripting the track element

You can create customized subtitle displays for your video webpages and manipulate the track element, methods, and properties through scripting.

 

For most of the examples here, you can download sample webvtt track files, and also run sample code from HTML5 Timed Text Track sample on the Microsoft website.

Standards

The World Wide Web Consortium (W3C) HTML5 track element standard and file format standards are still in development. See HTML5 A vocabulary and associated APIs for HTML and XHTML for more info.

Related topics

HTML5 audio and video
Internet Explorer 10 Samples and Tutorials

 

 

Show:
© 2014 Microsoft