The <track> HTML Element

Overview

The <track> element is used to specify timed text tracks for media elements like <video> and <audio>. These tracks may include subtitles, captions, descriptions, chapters, or metadata, providing various functionalities such as translations, transcriptions, and navigational aids. The tracks are typically formatted in a WebVTT format (with a .vtt extension).

Examples and Usage

For a diverse audience with varying needs and preferences, integrating multimedia elements thoughtfully is crucial. Leveraging the <track> element can help create a more inclusive and enriched experience. With this in mind, let's explore how a potential implementation would take place.

<video controls poster="preview-image.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="english-subtitles.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="spanish-subtitles.vtt" srclang="es" label="Spanish">
  <track kind="captions" src="captions.vtt" srclang="en">
  <track kind="descriptions" src="descriptions.vtt" srclang="en">
  <track kind="chapters" src="chapters.vtt" srclang="en">
  <p>Your browser does not support the video tag.</p>
</video>

The breakdown of this setup is as follows:

<video> Element: The main container for video playback. The controls attribute provides play, pause, and volume controls, while poster offers a preview image shown before playback starts.
Source Elements: Multiple <source> tags ensure video compatibility across different browsers. WebM format is placed first as it's an open standard, followed by the more common MP4 format.
Subtitles: The tracks for English (set as default) and Spanish provide translation of dialogues. The label attribute gives viewers a selection option in the video controls.
Captions: This track provides a transcription of significant audio content, aiding those with hearing impairments.
Descriptions: A text description of video scenes for the visually impaired. This content can be read by screen readers.
Chapters: Useful for longer videos, this track divides the content into navigable sections, enhancing user experience.
Fallback Message: Enclosed in a paragraph tag, this message serves as an alert for users with browsers that don't support the video playback.

This illustrative example demonstrates the multifaceted functionality of the <track> element, making the video content accessible and engaging for a wide array of viewers. In addition, the inclusion of metadata tracks could allow developers to synchronize additional content or interactions with specific video segments, adding another layer of interactivity.

Attribute Breakdown

The <track> element comes with a set of specific attributes to customize its behavior, in addition to global HTML attributes.

Attribute	Description
`default`	Specifies that the track should be enabled by default if the user's preferences do not indicate otherwise. Only one track element per media element can have this attribute.
`kind`	Defines the kind of text track, such as "subtitles," "captions," "descriptions," etc. If omitted, the default kind is "subtitles."
`label`	Provides a user-readable title for the track that can be displayed in the user interface.
`src`	Specifies the source URL of the track file, pointing to a `.vtt` file. The URL value must have the same origin as the document unless the parent media element has a `crossorigin` attribute.
`srclang`	Defines the language of the track text, using a valid BCP 47 language tag. Must be defined if the `kind` attribute is set to "subtitles."

Accessibility Aspects

As we observed previously, the <track> element has a vital role in improving the accessibility of multimedia content. From a more technical standpoint, it does not have a corresponding ARIA role, and no specific ARIA roles or attributes are permitted for this element.

Associated Elements

<audio>
<video>

Additional Notes

The <track> element must be a child of either the <video> or <audio> element.
The WebVTT format structures the text track with cues, timings, and optional settings for alignment and styling. It allows for the positioning of captions and the styling of cues using CSS. More details can be found here.
The kind attribute can take values such as "subtitles," "captions," "descriptions," "chapters," or "metadata." These represent different uses of the text track, such as translation of dialogue, transcription of audio, textual description of video content, chapter titles, or tracks used by scripts.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	Yes*

Useful Resources

Can I use HTML element: track

The HTML Living Standard Specification: track