HTML <track> element

The <track> element associates timed text with an <audio> or <video> element. Its src points to a text-track file, commonly WebVTT, and its kind identifies the purpose of the cues.

The kind subtitles supplies speech text, often translated, for viewers who can hear the audio. The kind captions includes speech and meaningful sound information, such as a ringing telephone or music. If kind is omitted, it defaults to subtitles.

The kind descriptions describes visual information for presentation through an alternative such as speech synthesis. The kind chapters names sections of the media. The kind metadata carries cues for scripts rather than direct presentation. These kinds are not all rendered as captions, and native player support for their presentation varies.

The srclang attribute identifies the language of the track using a language tag such as en or fr. It is required for subtitles and can also identify the language of captions. The label attribute gives a readable track name, such as English, for a player's track-selection interface.

The boolean default attribute indicates a preferred track when the user's preferences do not select a more appropriate one. It does not force captions on for every viewer. Within a player, mark at most one subtitles-or-captions track as the default.

The element has no closing tag or child content. Place it inside the media element after any <source> elements and before fallback content. For a simple setup, keep the track file on the same origin as the page. A track hosted on another origin needs appropriate CORS response headers and a crossorigin setting on the parent media element.

The example uses a caption cue covering the entire three-second clip. Enable English captions in the video controls if they are not already displayed. An audio player alone generally does not provide a visible caption area; provide a nearby transcript or use a video player when visible timed captions are needed.

The file media-captions.vtt contains the following cue. WEBVTT identifies the format; the timestamps give the start and end times, followed by the caption text. Serve this file with the MIME type text/vtt.

WEBVTT

00:00.000 --> 00:03.000
[A steady tone plays.]

Attributes: default, kind, label, src, srclang, GLOBALS.

Typical layout:
<video controls playsinline preload="metadata"
  width="320" height="180"
  poster="examples/media-poster.png">
  <source src="examples/media-example.mp4" type="video/mp4">
  <track src="examples/media-captions.vtt"
    kind="captions" srclang="en" label="English" default>
  Your browser does not support the video element.
</video>
<p>Video description: a title card reads “Media example” and “Three-second tone” while a steady tone plays.</p>
<p><a href="examples/media-example.mp4" download>Download the video</a></p>

Visual representation: