HTML Tracks

Understanding HTML Tracks

The HTML <track> element associates timed text information such as captions, subtitles, descriptions, and chapters with audio or video content.

Track information is commonly stored in a WebVTT file and connected to the media with attributes that identify the track's purpose, language, and label.

The <track> Element

The <track> element provides timed text information for an <audio> or <video> element.

<video controls>
  <source src="/audio-video/movie.mp4" type="video/mp4">
  <track src="/audio-video/captions.vtt" kind="captions" srclang="en" label="English">
</video>

The <track> element is a void element and therefore does not use a closing tag.

WebVTT Files

WebVTT, or Web Video Text Tracks, is a text format commonly used to provide timed text for HTML media. WebVTT files normally use the .vtt filename extension.

WEBVTT

00:00:00.000 --> 00:00:03.000
Birds are standing beside the water.

00:00:03.000 --> 00:00:06.000
[Bird calls]

Each cue identifies a time range followed by the text associated with that portion of the media.

Track Kinds

The kind attribute identifies the purpose of a text track. HTML defines several track kinds for different types of timed information.

<track src="captions.vtt" kind="captions">
<track src="subtitles.vtt" kind="subtitles">
<track src="descriptions.vtt" kind="descriptions">
<track src="chapters.vtt" kind="chapters">
<track src="metadata.vtt" kind="metadata">

The appropriate kind depends on what the track contains and how it is intended to be used.

Captions

Captions provide a text alternative for dialogue and other meaningful audio information needed to understand the media.

<track src="/audio-video/captions.vtt"
  kind="captions"
  srclang="en"
  label="English">

Unlike a simple transcript of spoken words, captions can identify speakers and include meaningful sounds such as music, alarms, applause, or other important audio cues.

Subtitles

Subtitles generally provide a translation or transcription of dialogue for viewers who can hear the audio but may not understand the language being spoken.

<track src="/audio-video/subtitles-es.vtt"
  kind="subtitles"
  srclang="es"
  label="Español">

Multiple subtitle tracks can be provided when the same media is available to audiences who use different languages.

Descriptions

A track with kind="descriptions" contains text descriptions of important visual information that is not already communicated through the media's audio.

<track src="/audio-video/descriptions.vtt"
  kind="descriptions"
  srclang="en"
  label="English Descriptions">

Description tracks can support users who cannot see important visual events, actions, text, or other information presented by the video.

Chapters

A track with kind="chapters" can divide media into named sections that may be used for navigation.

<track src="/audio-video/chapters.vtt"
  kind="chapters"
  srclang="en"
  label="Chapters">

Chapter cues can identify meaningful portions of longer media, although the way chapter information is presented depends on the browser or media interface.

Track Language and Labels

The srclang attribute identifies the language of a text track, while label provides a user-readable name for the track.

<track src="/audio-video/captions.vtt"
  kind="captions"
  srclang="en"
  label="English">

Clear language information and labels become particularly important when several caption or subtitle tracks are available for the same media.

Default Track

The boolean default attribute identifies a text track that should be enabled by default when user preferences do not indicate that another track is more appropriate.

<track src="/audio-video/captions.vtt"
  kind="captions"
  srclang="en"
  label="English"
  default>

Only one track of a particular kind should normally be marked as the default for the media.

HTML Track Example

The following example combines your existing MP4 video with an English caption track. Play the video and use the player's caption controls to turn the text track on or off.

Tracks and Accessibility

Text tracks are an important part of making multimedia content accessible. Captions make meaningful audio information available as text, while descriptions can provide information about important visual content.

Captions should be synchronized with the media, identify speakers when necessary, and include meaningful non-speech sounds. Automatically generated captions should be reviewed and corrected when accuracy is important.

A transcript can also be useful because it presents media information in a form that can be read independently of playback.

HTML Track Best Practices

• Provide captions for prerecorded video that contains meaningful spoken or audio information.
• Choose the kind value that accurately represents the purpose of each track.
• Use srclang to identify the language of captions and subtitles.
• Give tracks clear and understandable label values.
• Keep caption cues synchronized with the corresponding audio.
• Include meaningful non-speech sounds when they are important for understanding the media.
• Review automatically generated captions for errors before relying on them.

Summary

The HTML <track> element associates timed text with audio and video. WebVTT files can provide captions, subtitles, descriptions, chapters, and metadata, while attributes such as kind, srclang, label, and default describe how each track should be used.

Well-prepared text tracks improve the usefulness and accessibility of multimedia by making spoken information, meaningful sounds, translations, and other timed information available alongside the media.