HTML / Element

How to Use the track Element

To show captions in time with a video, connect a caption file with track.

The answer first

track adds timed text, such as captions, to an audio or video element. Choose the purpose with kind and point src to a separate text file.

Subtitles that translate dialogue and captions that include dialogue and meaningful sounds serve different purposes. A media resource may also need descriptions or a text version to make all its information available.

Add captions to a video

<video controls width="640" height="360">
  <source src="/media/lesson.webm" type="video/webm">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson.en.vtt"
         srclang="en" label="English captions" default>
  This browser cannot play the video element.
</video>

Put the video and caption files at the locations in your example. You can also link to a transcript near the video so people have another way to read its content if captions do not load.

track is a child of video. If you list format choices with source, put the track after them. The caption text goes in a separate file, not between the track tags.

Write the caption file

You can use a format such as WebVTT. A WebVTT file starts with WEBVTT and records each cue with a start time, an end time, and text.

WEBVTT

00:00:00.000 --> 00:00:02.000
Door closes.

00:00:02.000 --> 00:00:04.000
Speaker: Hello.

Save this example as a UTF-8 text file, such as lesson.en.vtt. The times are measured from the start of the media. Captions should include meaningful sounds when people need that information to understand the video.

What the attributes do

Attribute	What it tells the browser
`src`	The URL of the caption file. It is required.
`kind`	The purpose of the text track. This example uses `captions` for dialogue and meaningful sounds.
`srclang`	The language of the file, such as `en` for English. It is required when you use `kind="subtitles"`.
`label`	A readable name used when the browser lists tracks for selection.
`default`	A preferred track when the viewer's settings do not indicate a better choice. It does not force captions on.

For one media element, only one captions or subtitles track can have default. The browser may choose a different track to match the viewer's settings.

Choose the kind of text

captions: dialogue and sounds that matter to understanding the media.
subtitles: a transcription or translation of dialogue when the audio can be heard but is not understood. Set srclang too.
descriptions: text that describes visual information and can be synthesized as audio.
chapters: timed information about sections of a media resource.
metadata: timed information for scripts and other programmatic uses.

If you leave out kind, the standard treats it as subtitles. Captions burned into the video may not be switchable by viewers.

Provide a transcript for audio

You can associate a track with audio, but an audio player has no video area where captions can appear. If people need to read what a recording says, link to a separate transcript near the audio.

Adding captions does not automatically meet every accessibility requirement. The media's content determines whether it also needs visual descriptions or a text version for audio-only content.

Common mistakes

Using captions for translated dialogue without including meaningful sounds.
Writing caption text inside the track element instead of in a separate file.
Assuming default forces captions on regardless of viewer preferences.
Assuming a track on audio provides a readable transcript.

Check it in Atlas

For the content model, attribute requirements, WebVTT cues, WCAG boundaries, the available partial observations, and the remaining unverified scope, see the track element in Yugien Atlas. For video playback, see video; for audio and transcripts, see audio.