Timed text track examples

The following examples show how to the HTML5 video and track elements to add closed captioning and other features to your video playback. The track element in Internet Explorer uses either a Web Video Timed Text (WebVTT .vtt) or a Timed Text Markup Language (.ttml) format file. These examples use the simpler WebVTT format files and were created using the HTML5 Video Caption Maker demo.

Scenario 1: Basic timed text track example

See how to display a video with three text tracks using only HTML.

Scenario 2: Get and switch between multiple text tracks

See how to get and display a list of the timed text tracks using the textTracks and label properties.

Scenario 3: Using cue text to show your own styled captions

See how to use the cueChange event and activeCue property to get the current caption and display it in a styled box.

Scenario 4: Using metadata tracks to show additional content

See how to use the kind = "metadata" attribute with a track to provide a slideshow of webpages with a video.