<track> - The Track Element

The `<track>` Element

Media Element HTML5

The track element specifies text tracks for <video> and <audio> elements. It provides captions, subtitles, chapter titles, and audio descriptions in WebVTT format, making media content accessible to all users.

Quick Example

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
        type="video/mp4">

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

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

<p>Click CC button to enable captions/subtitles</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
        type="video/mp4">

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

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

<p>Click CC button to enable captions/subtitles</p>

Syntax

<track kind="captions" src="captions.vtt" srclang="en" label="English">

The <track> element is void (self-closing) and must be a child of <video> or <audio>.

Essential Attributes

kind (Track Type)

Specifies what type of text track to display:

Value	Purpose	Use Case
`captions`	Transcription and sound effects	For deaf/hard of hearing users
`subtitles`	Translation of dialogue	For users who don’t understand the audio language
`descriptions`	Audio descriptions of video	For blind/low vision users
`chapters`	Chapter titles for navigation	For quick navigation through media
`metadata`	Metadata for scripts	Not visible to user, for JavaScript

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4">

<!-- Captions: dialogue + sound effects -->
<track kind="captions"
       src="/captions.vtt"
       srclang="en"
       label="English Captions"
       default>

<!-- Subtitles: dialogue only -->
<track kind="subtitles"
       src="/subtitles-es.vtt"
       srclang="es"
       label="Spanish Subtitles">

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

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4">

<!-- Captions: dialogue + sound effects -->
<track kind="captions"
       src="/captions.vtt"
       srclang="en"
       label="English Captions"
       default>

<!-- Subtitles: dialogue only -->
<track kind="subtitles"
       src="/subtitles-es.vtt"
       srclang="es"
       label="Spanish Subtitles">

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

src (Required)

URL of the track file (must be WebVTT format):

<track src="captions.vtt">
<track src="https://example.com/subtitles.vtt">
<track src="/media/tracks/descriptions.vtt">

srclang (Required for captions/subtitles)

Language of the track text (BCP 47 language tag):

<track srclang="en">      <!-- English -->
<track srclang="es">      <!-- Spanish -->
<track srclang="fr">      <!-- French -->
<track srclang="de">      <!-- German -->
<track srclang="ja">      <!-- Japanese -->
<track srclang="zh-CN">   <!-- Chinese (Simplified) -->
<track srclang="pt-BR">   <!-- Portuguese (Brazil) -->

label (Required)

User-visible title for the track:

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        type="video/mp4">

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

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

<track kind="subtitles"
       src="/subtitles-fr.vtt"
       srclang="fr"
       label="Français">
</video>

<p>Labels appear in the CC menu</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        type="video/mp4">

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

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

<track kind="subtitles"
       src="/subtitles-fr.vtt"
       srclang="fr"
       label="Français">
</video>

<p>Labels appear in the CC menu</p>

default

Enables the track by default if user preferences don’t indicate otherwise:

<!-- This track loads automatically -->
<track kind="captions"
       src="captions.vtt"
       srclang="en"
       label="English"
       default>

Complete Attributes Reference

Attribute	Required	Description	Example
`kind`	No	Type of text track	`captions`, `subtitles`, `descriptions`, `chapters`, `metadata`
`src`	Yes	URL of track file (WebVTT)	`src="captions.vtt"`
`srclang`	For subtitles/captions	Language code (BCP 47)	`srclang="en"`
`label`	For subtitles/captions	User-visible title	`label="English"`
`default`	No	Enable by default	`default`

WebVTT Format

Basic WebVTT Structure

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our video tutorial.

00:00:03.000 --> 00:00:07.000
Today we'll learn about HTML5 video.

00:00:07.000 --> 00:00:11.000
Let's get started!

Cue Identifiers

WEBVTT

intro
00:00:00.000 --> 00:00:03.000
Welcome to our video tutorial.

section-1
00:00:03.000 --> 00:00:07.000
Today we'll learn about HTML5 video.

Styling Cues

WEBVTT

00:00:00.000 --> 00:00:03.000
<v Speaker1>Hello, how are you?</v>

00:00:03.000 --> 00:00:05.000
<v Speaker2>I'm doing great!</v>

00:00:05.000 --> 00:00:08.000
<c.important>Important announcement</c>

00:00:08.000 --> 00:00:11.000
<b>Bold text</b> and <i>italic text</i>

Positioning and Alignment

WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
Left-aligned caption

00:00:03.000 --> 00:00:06.000 align:end
Right-aligned caption

00:00:06.000 --> 00:00:09.000 position:50% align:middle
Centered caption

00:00:09.000 --> 00:00:12.000 line:0%
Top of video

00:00:12.000 --> 00:00:15.000 line:100%
Bottom of video

Track Types in Detail

Captions

Transcription of dialogue plus sound effects for deaf/hard of hearing users:

WEBVTT

00:00:00.000 --> 00:00:02.000
[upbeat music playing]

00:00:02.500 --> 00:00:05.000
<v Narrator>Welcome to our cooking show!</v>

00:00:05.500 --> 00:00:07.000
[sizzling sounds]

00:00:07.000 --> 00:00:10.000
<v Chef>Today we're making pasta.

00:00:10.500 --> 00:00:11.500
[water boiling]

Subtitles

Translation of dialogue for users who understand the audio language:

WEBVTT

00:00:02.500 --> 00:00:05.000
Bienvenido a nuestro programa de cocina!

00:00:07.000 --> 00:00:10.000
Hoy vamos a hacer pasta.

Descriptions

Audio descriptions for blind/low vision users:

WEBVTT

00:00:00.000 --> 00:00:05.000
A chef enters a modern kitchen wearing a white apron.

00:00:10.000 --> 00:00:15.000
The chef places a pot of water on the stove.

00:00:20.000 --> 00:00:25.000
Steam rises as the water begins to boil.

Chapters

Navigation markers for quick access to sections:

WEBVTT

intro
00:00:00.000 --> 00:01:30.000
Introduction

ingredients
00:01:30.000 --> 00:05:00.000
Gathering Ingredients

cooking
00:05:00.000 --> 00:15:00.000
Cooking Process

plating
00:15:00.000 --> 00:18:00.000
Plating and Presentation

conclusion
00:18:00.000 --> 00:20:00.000
Conclusion

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
        type="video/mp4">

<!-- Note: Chapters appear in some browser's chapter menu -->
<track kind="chapters"
       src="/chapters.vtt"
       srclang="en"
       label="Chapters">
</video>

<p>Some browsers show chapters in a menu for easy navigation</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
        type="video/mp4">

<!-- Note: Chapters appear in some browser's chapter menu -->
<track kind="chapters"
       src="/chapters.vtt"
       srclang="en"
       label="Chapters">
</video>

<p>Some browsers show chapters in a menu for easy navigation</p>

Metadata

Data for scripts, not displayed to users:

WEBVTT

00:00:00.000 --> 00:00:10.000
{"products": ["apron", "pot"], "scene": "kitchen"}

00:00:10.000 --> 00:00:20.000
{"products": ["pasta", "sauce"], "scene": "cooking"}

<video id="meta-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
        type="video/mp4">

<track kind="metadata"
       src="/metadata.vtt"
       srclang="en"
       label="Metadata">
</video>

<div id="meta-output">Metadata will appear here</div>

<script>
const video = document.getElementById('meta-video');
const output = document.getElementById('meta-output');

video.textTracks[0].addEventListener('cuechange', (e) => {
  const track = e.target;
  if (track.activeCues && track.activeCues.length > 0) {
    const cue = track.activeCues[0];
    output.textContent = 'Current metadata: ' + cue.text;
  }
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<video id="meta-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
        type="video/mp4">

<track kind="metadata"
       src="/metadata.vtt"
       srclang="en"
       label="Metadata">
</video>

<div id="meta-output">Metadata will appear here</div>

<script>
const video = document.getElementById('meta-video');
const output = document.getElementById('meta-output');

video.textTracks[0].addEventListener('cuechange', (e) => {
  const track = e.target;
  if (track.activeCues && track.activeCues.length > 0) {
    const cue = track.activeCues[0];
    output.textContent = 'Current metadata: ' + cue.text;
  }
});
</script>

JavaScript TextTrack API

Accessing Tracks

<video id="api-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
        type="video/mp4">

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

<track kind="subtitles"
       src="/subtitles-es.vtt"
       srclang="es"
       label="Spanish">
</video>

<div id="track-info"></div>

<script>
const video = document.getElementById('api-video');
const info = document.getElementById('track-info');

// List all tracks
let html = '<h4>Available Tracks:</h4><ul>';
for (let i = 0; i < video.textTracks.length; i++) {
  const track = video.textTracks[i];
  html += '<li>' + track.kind + ': ' + track.label + ' (' + track.language + ')</li>';
}
html += '</ul>';
info.innerHTML = html;
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<video id="api-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
        type="video/mp4">

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

<track kind="subtitles"
       src="/subtitles-es.vtt"
       srclang="es"
       label="Spanish">
</video>

<div id="track-info"></div>

<script>
const video = document.getElementById('api-video');
const info = document.getElementById('track-info');

// List all tracks
let html = '<h4>Available Tracks:</h4><ul>';
for (let i = 0; i < video.textTracks.length; i++) {
  const track = video.textTracks[i];
  html += '<li>' + track.kind + ': ' + track.label + ' (' + track.language + ')</li>';
}
html += '</ul>';
info.innerHTML = html;
</script>

Programmatically Enabling Tracks

<video id="control-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
        type="video/mp4">

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

<track id="es-track" kind="subtitles"
       src="/subtitles-es.vtt"
       srclang="es"
       label="Spanish">
</video>

<div>
<button onclick="enableTrack(0)">Enable English</button>
<button onclick="enableTrack(1)">Enable Spanish</button>
<button onclick="disableAll()">Disable All</button>
</div>

<script>
const video = document.getElementById('control-video');

function enableTrack(index) {
  // Disable all tracks first
  for (let i = 0; i < video.textTracks.length; i++) {
    video.textTracks[i].mode = 'disabled';
  }
  // Enable selected track
  video.textTracks[index].mode = 'showing';
}

function disableAll() {
  for (let i = 0; i < video.textTracks.length; i++) {
    video.textTracks[i].mode = 'disabled';
  }
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<video id="control-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
        type="video/mp4">

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

<track id="es-track" kind="subtitles"
       src="/subtitles-es.vtt"
       srclang="es"
       label="Spanish">
</video>

<div>
<button onclick="enableTrack(0)">Enable English</button>
<button onclick="enableTrack(1)">Enable Spanish</button>
<button onclick="disableAll()">Disable All</button>
</div>

<script>
const video = document.getElementById('control-video');

function enableTrack(index) {
  // Disable all tracks first
  for (let i = 0; i < video.textTracks.length; i++) {
    video.textTracks[i].mode = 'disabled';
  }
  // Enable selected track
  video.textTracks[index].mode = 'showing';
}

function disableAll() {
  for (let i = 0; i < video.textTracks.length; i++) {
    video.textTracks[i].mode = 'disabled';
  }
}
</script>

Track Modes

Mode	Description
`disabled`	Track not active (default)
`hidden`	Track active but not displayed (useful for metadata)
`showing`	Track active and displayed

Listening to Cue Changes

<video id="cue-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4">

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

<div id="current-cue"
   style="border: 2px solid #3b82f6; padding: 1rem; margin-top: 1rem; min-height: 50px;">
Current caption will appear here
</div>

<script>
const video = document.getElementById('cue-video');
const cueDisplay = document.getElementById('current-cue');

video.textTracks[0].addEventListener('cuechange', () => {
  const track = video.textTracks[0];
  if (track.activeCues && track.activeCues.length > 0) {
    cueDisplay.textContent = track.activeCues[0].text;
  } else {
    cueDisplay.textContent = 'Current caption will appear here';
  }
});

// Enable track
video.textTracks[0].mode = 'showing';
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<video id="cue-video" controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4">

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

<div id="current-cue"
   style="border: 2px solid #3b82f6; padding: 1rem; margin-top: 1rem; min-height: 50px;">
Current caption will appear here
</div>

<script>
const video = document.getElementById('cue-video');
const cueDisplay = document.getElementById('current-cue');

video.textTracks[0].addEventListener('cuechange', () => {
  const track = video.textTracks[0];
  if (track.activeCues && track.activeCues.length > 0) {
    cueDisplay.textContent = track.activeCues[0].text;
  } else {
    cueDisplay.textContent = 'Current caption will appear here';
  }
});

// Enable track
video.textTracks[0].mode = 'showing';
</script>

Accessibility Requirements

WCAG Guidelines

Level A Requirements:

Captions for all prerecorded audio content in video
Audio descriptions OR full text alternative for prerecorded video

Level AA Requirements:

Captions for all live audio content
Audio descriptions for all prerecorded video

Level AAA Requirements:

Sign language interpretation
Extended audio descriptions

WEBVTT

00:00:00.000 --> 00:00:03.000
[upbeat music]

00:00:03.000 --> 00:00:06.000
<v John>Hello, welcome to the show!</v>

00:00:06.500 --> 00:00:08.000
[audience applause]

00:00:09.000 --> 00:00:12.000
<v Sarah>Thanks for having me.

WEBVTT

00:00:00.000 --> 00:00:03.000


00:00:03.000 --> 00:00:06.000
Hello, welcome to the show!

00:00:09.000 --> 00:00:12.000
Thanks for having me.

Guidelines:

Include speaker identification
Describe non-speech sounds in [brackets]
Keep lines short (32-40 characters max)
Display for 1-7 seconds based on reading speed
Synchronize accurately with audio
Use proper punctuation and capitalization

Multiple Language Support

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        type="video/mp4">

<!-- English captions (default) -->
<track kind="captions"
       src="/captions-en.vtt"
       srclang="en"
       label="English"
       default>

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

<!-- French subtitles -->
<track kind="subtitles"
       src="/subtitles-fr.vtt"
       srclang="fr"
       label="Français">

<!-- German subtitles -->
<track kind="subtitles"
       src="/subtitles-de.vtt"
       srclang="de"
       label="Deutsch">
</video>

<p>Multiple language options appear in CC menu</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        type="video/mp4">

<!-- English captions (default) -->
<track kind="captions"
       src="/captions-en.vtt"
       srclang="en"
       label="English"
       default>

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

<!-- French subtitles -->
<track kind="subtitles"
       src="/subtitles-fr.vtt"
       srclang="fr"
       label="Français">

<!-- German subtitles -->
<track kind="subtitles"
       src="/subtitles-de.vtt"
       srclang="de"
       label="Deutsch">
</video>

<p>Multiple language options appear in CC menu</p>

Styling Captions with CSS

WebVTT Cue Pseudo-element

<style>
video::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.2rem;
  font-family: Arial, sans-serif;
}

/* Style speaker voices */
video::cue(v[voice="John"]) {
  color: #3b82f6;
}

video::cue(v[voice="Sarah"]) {
  color: #ec4899;
}

/* Style important captions */
video::cue(.important) {
  color: #fbbf24;
  font-weight: bold;
}
</style>

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
        type="video/mp4">

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

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
video::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.2rem;
  font-family: Arial, sans-serif;
}

/* Style speaker voices */
video::cue(v[voice="John"]) {
  color: #3b82f6;
}

video::cue(v[voice="Sarah"]) {
  color: #ec4899;
}

/* Style important captions */
video::cue(.important) {
  color: #fbbf24;
  font-weight: bold;
}
</style>

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
        type="video/mp4">

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

Supported CSS Properties

video::cue {
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
  text-shadow: 1px 1px 2px black;
  opacity: 0.9;
}

Common Patterns

Complete Accessibility Setup

<figure>
<figcaption>
  <strong>Video Tutorial: HTML Basics</strong>
</figcaption>

<video controls width="640" height="360"
       poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
          type="video/mp4">

  <!-- Captions for deaf/hard of hearing -->
  <track kind="captions"
         src="/captions-en.vtt"
         srclang="en"
         label="English Captions"
         default>

  <!-- Subtitles for translation -->
  <track kind="subtitles"
         src="/subtitles-es.vtt"
         srclang="es"
         label="Spanish Subtitles">

  <!-- Audio descriptions for blind users -->
  <track kind="descriptions"
         src="/descriptions-en.vtt"
         srclang="en"
         label="Audio Descriptions">

  <!-- Chapters for navigation -->
  <track kind="chapters"
         src="/chapters-en.vtt"
         srclang="en"
         label="Chapters">

  Your browser doesn't support video.
</video>

<details>
  <summary>Video Transcript</summary>
  <p>[Full text transcript would go here...]</p>
</details>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<figcaption>
  <strong>Video Tutorial: HTML Basics</strong>
</figcaption>

<video controls width="640" height="360"
       poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
          type="video/mp4">

  <!-- Captions for deaf/hard of hearing -->
  <track kind="captions"
         src="/captions-en.vtt"
         srclang="en"
         label="English Captions"
         default>

  <!-- Subtitles for translation -->
  <track kind="subtitles"
         src="/subtitles-es.vtt"
         srclang="es"
         label="Spanish Subtitles">

  <!-- Audio descriptions for blind users -->
  <track kind="descriptions"
         src="/descriptions-en.vtt"
         srclang="en"
         label="Audio Descriptions">

  <!-- Chapters for navigation -->
  <track kind="chapters"
         src="/chapters-en.vtt"
         srclang="en"
         label="Chapters">

  Your browser doesn't support video.
</video>

<details>
  <summary>Video Transcript</summary>
  <p>[Full text transcript would go here...]</p>
</details>
</figure>

Educational Video with Chapters

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4">

<track kind="chapters"
       src="/tutorial-chapters.vtt"
       srclang="en"
       label="Tutorial Sections">

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

<nav id="chapter-nav" style="margin-top: 1rem;"></nav>

<script>
const video = document.querySelector('video');
const nav = document.getElementById('chapter-nav');

video.textTracks[0].addEventListener('load', function() {
  const track = this;
  let html = '<h4>Jump to Section:</h4>';

  for (let i = 0; i < track.cues.length; i++) {
    const cue = track.cues[i];
    html += '<button onclick="jumpToTime(' + cue.startTime + ')">' +
            cue.text + '</button> ';
  }

  nav.innerHTML = html;
});

function jumpToTime(time) {
  video.currentTime = time;
  video.play();
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<video controls width="640" height="360">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4">

<track kind="chapters"
       src="/tutorial-chapters.vtt"
       srclang="en"
       label="Tutorial Sections">

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

<nav id="chapter-nav" style="margin-top: 1rem;"></nav>

<script>
const video = document.querySelector('video');
const nav = document.getElementById('chapter-nav');

video.textTracks[0].addEventListener('load', function() {
  const track = this;
  let html = '<h4>Jump to Section:</h4>';

  for (let i = 0; i < track.cues.length; i++) {
    const cue = track.cues[i];
    html += '<button onclick="jumpToTime(' + cue.startTime + ')">' +
            cue.text + '</button> ';
  }

  nav.innerHTML = html;
});

function jumpToTime(time) {
  video.currentTime = time;
  video.play();
}
</script>

CORS Considerations

Track files must respect CORS when loaded from different origins:

<!-- Video and track from same origin: works -->
<video controls src="/video.mp4">
  <track src="/captions.vtt">
</video>

<!-- Cross-origin: requires CORS headers -->
<video controls crossorigin="anonymous"
       src="https://cdn.example.com/video.mp4">
  <track src="https://cdn.example.com/captions.vtt">
</video>

Server configuration needed:

Access-Control-Allow-Origin: *
Content-Type: text/vtt; charset=utf-8

Browser Support

Feature	Chrome	Firefox	Safari	Edge
`<track>` basic	23+	31+	6+	12+
WebVTT format	23+	31+	6+	12+
`kind="captions"`	23+	31+	6+	12+
`kind="subtitles"`	23+	31+	6+	12+
`kind="chapters"`	23+	31+	6+	12+
`kind="descriptions"`	51+	55+	12.1+	79+
TextTrack API	23+	31+	6+	12+
CSS `::cue`	23+	55+	6+	79+

Tools and Resources

WebVTT Editors

Subtitle Edit - Free, open-source
Aegisub - Advanced subtitle editor
YouTube Studio - Auto-caption + editing

Validation

Caption Services

YouTube Auto-Captions (free, requires editing)
Rev.com (professional human captions)
3Play Media (professional service)

Video element that uses track for captions. Learn more →

Audio element that can use track for transcripts. Learn more →

Provides multiple media format options. Learn more →

<track> - The Track Element

The <track> Element

Quick Example

Syntax

Essential Attributes

kind (Track Type)

src (Required)

srclang (Required for captions/subtitles)

label (Required)

default

Complete Attributes Reference

WebVTT Format

Basic WebVTT Structure

Cue Identifiers

Styling Cues

Positioning and Alignment

Track Types in Detail

Captions

Subtitles

Descriptions

Chapters

Metadata

JavaScript TextTrack API

Accessing Tracks

Programmatically Enabling Tracks

Track Modes

Listening to Cue Changes

Accessibility Requirements

WCAG Guidelines

Caption Best Practices

Multiple Language Support

Styling Captions with CSS

WebVTT Cue Pseudo-element

Supported CSS Properties

Common Patterns

Complete Accessibility Setup

Educational Video with Chapters

CORS Considerations

Browser Support

Tools and Resources

WebVTT Editors

Validation

Caption Services

Related Elements

Specifications

The `<track>` Element