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

WEBVTT 00:00:01.000 --> 00:00:04.000 Hello, and welcome to this tutorial. 00:00:05.000 --> 00:00:08.500 Today we'll learn about HTML video captions. 00:00:09.000 --> 00:00:12.000 Let's get started!

With Speaker Identification

WEBVTT 00:00:01.000 --> 00:00:03.500 <v Host>Welcome to the show!</v> 00:00:04.000 --> 00:00:06.500 <v Guest>Thanks for having me.</v>

With Sound Effects

WEBVTT 00:00:01.000 --> 00:00:03.000 [suspenseful music] 00:00:03.500 --> 00:00:05.000 [door creaks open] 00:00:05.500 --> 00:00:08.000 Who's there?

Positioning and Styling

WEBVTT 00:00:01.000 --> 00:00:04.000 line:90% position:50% align:center Centered at bottom 00:00:05.000 --> 00:00:08.000 line:10% position:10% align:left Top left corner

Chapter Markers

WEBVTT chapter-1 00:00:00.000 --> 00:02:30.000 Introduction chapter-2 00:02:30.000 --> 00:08:15.000 Getting Started chapter-3 00:08:15.000 --> 00:15:00.000 Advanced Topics chapter-4 00:15:00.000 --> 00:20:00.000 Conclusion

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

Custom Caption Display

<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> <script> const video = document.getElementById('myVideo'); const captionDisplay = document.getElementById('custom-captions'); 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

Related Elements

<video> - Video player that accepts track elements
<audio> - Audio player that accepts track elements
<source> - Media sources for video/audio

CSS Reference

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

/* Style video captions */ video::cue { background: rgba(0, 0, 0, 0.8); color: white; font-family: system-ui, sans-serif; font-size: 1rem; } /* Style specific voices */ video::cue(v[voice="Host"]) { color: yellow; } /* Hide track element (precautionary) */ track { display: none; }