track

The track element provides timed text tracks for video and audio elements, enabling captions, subtitles, descriptions, and chapter markers.

Description

The <track> element specifies timed text tracks (in WebVTT format) for <video> and <audio> elements. These tracks provide captions for deaf users, subtitles for foreign languages, audio descriptions for blind users, and chapter navigation.

Tracks are essential for accessibility and are required by many accessibility standards (WCAG) for video content with audio.

When to Use

Captions - Transcription of dialogue plus descriptions of important sounds
Subtitles - Translation of dialogue into another language
Descriptions - Audio descriptions of visual content for blind users
Chapters - Navigation markers for longer videos
Metadata - Machine-readable data synchronized with media

Track Kinds

Kind	Purpose	Display
`captions`	Dialogue + sound effects for deaf/hard-of-hearing	Shown over video
`subtitles`	Translation of spoken dialogue	Shown over video
`descriptions`	Audio descriptions of visual content	Synthesized speech or separate audio
`chapters`	Chapter titles for navigation	In browser UI/controls
`metadata`	Machine-readable data	Not displayed (JavaScript access)

Captions vs Subtitles

Captions

Designed for deaf and hard-of-hearing users. Include:

All spoken dialogue
Speaker identification when not obvious
Sound effects: [door slams], [phone rings]
Music descriptions: [upbeat jazz music]
Non-verbal sounds: [sighs], [laughs]

Subtitles

Designed for users who can hear but don't understand the spoken language. Include:

Translation of spoken dialogue
Assume user can hear non-speech audio

WebVTT Format

Track files use the WebVTT (Web Video Text Tracks) format.

Basic Structure

With Speaker Identification

With Sound Effects

Positioning and Styling

Chapter Markers

Attributes

Attribute	Description
`src`	URL of the track file (.vtt)
`kind`	`captions`, `subtitles`, `descriptions`, `chapters`, or `metadata`
`srclang`	Language of the track (BCP 47 language tag)
`label`	User-readable title shown in track selection
`default`	Enable this track by default

Live Examples

Video with Multiple Tracks

Audio with Captions

Tracks can also be used with audio elements, though browser support varies.

JavaScript API

Access track data programmatically for custom displays or metadata processing.

const video = document.querySelector('video');
const track = video.textTracks[0];

// Listen for cue changes
track.oncuechange = function() {
  const activeCues = track.activeCues;
  if (activeCues.length > 0) {
    console.log('Current caption:', activeCues[0].text);
  }
};

// Show/hide tracks programmatically
track.mode = 'showing';  // Show captions
track.mode = 'hidden';   // Load but don't display
track.mode = 'disabled'; // Don't load/code-block

<h3>Custom Caption Display</h3>
    <code-block language="html" show-lines label="Custom caption display" data-escape><video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="en" default />
</video>
<div id="custom-captions"></div>

video.textTracks[0].mode = 'hidden';

video.textTracks[0].oncuechange = function() {
  const cue = this.activeCues[0];
  captionDisplay.textContent = cue ? cue.text : '';
};
</script>

Accessibility

WCAG Requirements

Web Content Accessibility Guidelines require captions and audio descriptions:

Criterion	Level	Requirement
1.2.2 Captions (Prerecorded)	A	Captions for all prerecorded audio in video
1.2.3 Audio Description or Media Alternative	A	Audio description or text alternative for video
1.2.4 Captions (Live)	AA	Captions for live audio in video
1.2.5 Audio Description (Prerecorded)	AA	Audio description for prerecorded video

Best Practices

Always provide captions for videos with speech
Use kind="captions" for deaf/hard-of-hearing users
Use kind="subtitles" for translations only
Include sound effects and speaker identification in captions
Ensure caption timing matches audio accurately
Provide a text transcript as an additional option
Test captions with actual users

Caption Quality

Synchronize captions to within 1 second of audio
Don't exceed 2 lines per caption
Keep captions on screen long enough to read (minimum 1 second)
Use standard punctuation and grammar
Indicate speaker changes clearly

<video> - Video player that accepts track elements
<audio> - Audio player that accepts track elements
<audio-player> - Web component with custom controls that supports text tracks
<source> - Media sources for video/audio
<details> - Useful for building chapter navigation UI from chapter tracks
Internationalization (i18n) - Language handling guidance for the srclang attribute

CSS Reference

The <track> element is not rendered directly. Caption styling is controlled via the ::cue pseudo-element.

Welcome to Vanilla Breeze