<track> Text track
Adds WebVTT captions, subtitles or chapters to audio and video.
<track> is a void element that goes inside <video> or <audio> and points to a WebVTT (.vtt) file of timed text.
Pick the kind by audience. kind="captions" covers dialogue plus important sounds for deaf and hard of hearing viewers, subtitles is for translations, and chapters helps navigation. srclang and label describe each track, and default switches one on. Captions are an accessibility requirement, so plan them from the start.
All the kind values (subtitles, captions, descriptions, chapters and metadata) are listed in the track element definition (opens in a new tab). Try adding one to a video element.
Void element: it has no content and no closing tag.
Syntax
<video controls src="clip.mp4">
<track kind="captions" src="clip.vtt" srclang="en" label="English">
</video>When to use it
Lessons, product demos, interviews, recorded talks: any video with speech or meaningful sound should have a <track>. Each translation gets one more track with kind="subtitles". A track points to a WebVTT file, which is plain text starting with the word WEBVTT and then a run of cues with start and end times.
The main alternative is captions burned into the picture. Those show up everywhere, social media feeds included. Nobody can turn them off, resize them or translate them, though, and screen readers can't read them. With a track the text stays separate and editable, and fixing a typo doesn't mean exporting the video again.
The .vtt file has to come from the page's own origin, or from a server that sends CORS headers plus a crossorigin attribute on the video. If not, the browser refuses to load it without any message and you get no captions. Pages opened from disk with a file:// address often block tracks as well. Test on a local web server.
Attributes
| Attribute | What it does |
|---|---|
kind | subtitles, captions, descriptions, chapters or metadata. |
src | URL of the .vtt file (required). |
srclang | Language of the track, such as en. |
label | Name shown in the player's track menu. |
default | Enables this track by default. |
Live example
Edit the code and watch the preview.
<video controls width="320">
<source src="flower.mp4" type="video/mp4">
<track kind="captions" src="flower-en.vtt" srclang="en" label="English" default>
</video>More examples
Captions and translated subtitles
English captions are on by default. Spanish and German subtitles are in the player's captions menu. The poster image appears even with the video file missing, and nothing downloads before play is pressed.
<video controls preload="none" width="400" height="200" poster="mountains.svg">
<source src="trail-tour.mp4" type="video/mp4">
<track kind="captions" src="trail-tour-en.vtt" srclang="en" label="English" default>
<track kind="subtitles" src="trail-tour-es.vtt" srclang="es" label="Espanol">
<track kind="subtitles" src="trail-tour-de.vtt" srclang="de" label="Deutsch">
<a href="trail-tour.mp4">Download the trail tour video</a>
</video>Captions plus a transcript
The captions track is for people watching. The transcript in a details element is for people who would sooner read, search or skim. Between them they reach far more visitors than either would alone.
<video controls preload="none" width="400" height="300" poster="pancakes.svg">
<source src="pancake-recipe.mp4" type="video/mp4">
<track kind="captions" src="pancake-recipe-en.vtt" srclang="en" label="English" default>
</video>
<details>
<summary>Read the transcript</summary>
<p>Hi! Today we make fluffy pancakes. First, whisk two eggs with the milk...</p>
</details>Tip: Every video with speech needs captions.
Browser support
All current browsers support track with WebVTT captions and subtitles and add a captions menu to their built-in controls. Chapters, descriptions and metadata tracks load too, but the built-in controls mostly ignore them, so you would need a custom player. See the WebVTT support table (opens in a new tab).
Accessibility
Prerecorded video with sound needs captions (WCAG 1.2.2) and live video needs live captions (1.2.4). A track with kind="captions" is the standard way to supply them. What good captions contain is described in the W3C note Understanding Captions (Prerecorded) (opens in a new tab).
Common mistakes
Wrong
<track src="subs.srt" kind="captions">Right
<track src="subs.vtt" kind="captions" srclang="en" label="English">Use a WebVTT file; browsers do not accept SRT. srclang is required for subtitles and belongs on captions too.
Frequently asked questions
How do I add subtitles to an HTML video?
Write a WebVTT (.vtt) file with the timed text, then put a <track> inside the <video>: <track kind="captions" src="captions.vtt" srclang="en" label="English" default>. The browser loads the file only from the same origin or with CORS headers. The caption format itself is defined in the WebVTT (opens in a new tab) spec.
What is the difference between captions and subtitles?
They serve different viewers. In HTML, kind="subtitles" translates the dialogue for people who can hear it but do not speak the language. kind="captions" transcribes the dialogue and relevant sounds, like music or a slammed door, for deaf and hard of hearing viewers. WCAG requires captions for prerecorded video with audio. Wikipedia's closed captioning (opens in a new tab) article goes into the difference in more depth.