The HTML <track> label attribute
The HTML label attribute on <track> names a text track in the player's captions menu. Examples include English and Español. When present it must not be empty, and two tracks with the same kind and language need different labels.
Overview
The label attribute on <track> names a text track for the people choosing it. Browsers use it when listing subtitle, caption and audio description tracks in their interface, so it is the text viewers see in the captions menu of a <video>.
The value must be a non-empty string when the attribute is present. The HTML Standard also forbids two tracks in the same media element that share a kind, a language and a label, so two English subtitle tracks, say the dialogue and a director's commentary, need different labels.
Leaving label off is allowed. The track's label then becomes an empty string, and the HTML Standard says the browser should generate a label from the track's other properties, such as its kind and language, which is a good reason to set one on every track.
In JavaScript the value is available as label on the track element and on the matching TextTrack in video.textTracks. A custom player can read each track's label to build its own captions menu and switch the track's mode when the viewer picks one.
Syntax
<track kind="subtitles" src="subs-es.vtt" srclang="es" label="Español">Values
| Value |
|---|
A non-empty string, such as English or English (CC). |
Example
<video id="v" src="https://codeshack.io/web/example.mp4" controls muted width="240">
<track kind="subtitles" srclang="en" label="English" default src="data:text/vtt,WEBVTT%0A%0A00:00.000%20--%3E%2000:31.000%0AEnglish%20subtitles">
<track kind="subtitles" srclang="es" label="Español" src="data:text/vtt,WEBVTT%0A%0A00:00.000%20--%3E%2000:31.000%0ASubt%C3%ADtulos%20en%20espa%C3%B1ol">
</video>
<p id="out"></p>
<p><small>Each track inlines its WebVTT text as a data: URL. A real page points src at a .vtt file.</small></p>
<script>
const tracks = [...document.getElementById('v').textTracks];
document.getElementById('out').textContent = 'Track labels: ' + tracks.map(t => t.label).join(', ');
</script>Best practices
- Write each label in the track's own language, such as Español or Deutsch, so viewers can spot their language in the menu.
- Say what makes a track different when two share a language, for example English and English (CC) for subtitles and captions.
- Give every track a label even though the attribute is optional, because an unlabeled track leaves the menu text to the browser.
- Keep labels unique among tracks of the same kind and language, as the HTML Standard requires.
Accessibility
Clear labels help caption users pick the right track. When a video offers both subtitles and captions in one language, put the difference in the label, for example English (CC), so viewers who need sound effects and speaker names described can find the captions track.