Getting started with the Track element

  • Article

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

What is the Track element?

Internet Explorer 10 and Windows Store apps using JavaScript support the track element as described in Section 4.8.9 of the World Wide Web Consortium (W3C)'s HTML5 standard, which is currently in the Working Draft stage. The track element enables you to add timed text tracks, such as closed captioning, translations, or text commentary, to HTML5 video elements. For a simple tool to create track files, see the HTML5 Video Caption Maker.

The text is displayed near the bottom of the video area in the player. The captioning selection menu button on the player enables you to turn the track on and off, or switch between multiple tracks. At this time the position and color of text can't be controlled, but you can retrieve text through script and display it in your own way. See Scripting the track element for more info. For more info about using video elements, see How to use HTML5 to play video files on your webpage.

Captioning made easy

The video and track elements can be added to your HTML to provide video playback with full captioning. The syntax for the element is as follows.

<video src="video.mp4" controls autoplay loop>
  <track src="en_track.vtt" srclang="en" label="English" kind="subtitles" default>
</video>

The track element is a child element of the video element, similar to the source element that's used to specify video files. In this example, the video element's src attribute is a file called "video.mp4". The controls, autoplay, and loop attributes enable the player's built-in playback controls, start the video when the page is opened, and replay the video repeatedly. The track element's source is a file called "en_track.vtt" file. The srclang, label, and kind attributes define the language (en), a friendly name for the built in captioning selection menu (English), and the type of text file (captions). The default attribute specifies that this track file should be active and be displayed in the player when the video starts. If the default attribute is left off, the user would need to choose the track from the captioning selection menu in the video player as shown in the following screen shot.

The track element accepts the following attributes.

Attribute Description

kind

Defines the type of text content. The following are the options, and usage as recommended by the w3c.

  • subtitles - Transcriptions or translation of the dialogue in the video. Meant to be used when the sound is available but not understood (wrong language). Subtitles are overlaid on the video player.
  • captions - Transcriptions or translations of dialogue, sound effects, musical cues, or other relevant audio information, suitable for when sound is not audible or unavailable. Subtitles are overlaid on the video player.
  • descriptions Textual descriptions of the video content intended for audio synthesis when the video component isn't available. Not displayed in the video player.
  • chapters Chapter titles, used for navigating the video. Not displayed in the video player.
  • metadata Used for scripting or non-visual info. Not displayed in the video player.

If this attribute is omitted, the track kind defaults to subtitles.

src

URL of the timed text file. The player accepts Web Video Text Track (WebVTT) or Timed Text Markup Language (TTML) format files.

srclang

The language of the timed text file. For information purposes; not used in the player.

label

Provides a label that can be used to identify the timed text. Each track must have a unique label. This label is displayed in the captioning selection menu shown in the screen shot above.

default

Specifies the default track element. If not specified, no track is displayed.

 

Multiple track files

More than one timed text file can be used—for instance, to provide your users with multiple languages or alternate commentary. If you're using multiple tracks, you set one as default to be used if your page doesn't specify or the user hasn't picked a language. Within the video player, the user can choose alternate tracks by using the built-in captioning selection menu.

The following example shows a video element with three track elements.

    <video id="video1" controls autoplay loop>
      <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" >
      <track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default> 
      <track id="esTrack" src="estrack.vtt" label="Spanish" kind="subtitles" srclang="es">
      <track id="deTrack" src="detrack.vtt" label="German" kind="subtitles" srclang="de">
      HTML5 video not supported
    </video>

In this example, the source element is used to define the video file (video.mp4), and the track elements each specify a text translation. The following screen shot shows the captioning selection menu with three language options.

What's next?

The examples here can get you started using the track element to add captions to your HTML5 video webpages, without using scripting or plug-ins. To see examples and ideas of what you can do from JavaScript, see Scripting the track element.

Create WebVTT or TTML files with Caption Maker

How to use HTML5 to play video files on your webpage

HTML5 Timed Text Track sample

Internet Explorer 10 Samples and Tutorials

Scripting the track element

Track element