<track>

The <track> tag is used to provide subtitles, captions, or temporal metadata to a video or audio file.

It is always used in combination with the <video> or <audio> tags. This tag improves accessibility by allowing users to follow the content, even without sound or in another language. Use subtitles as much as you can! 😋

Structure and syntax of the <track> tag

Basic structure and syntax

The <track> tag is a self-closing tag (it closes itself) that has no content or closing tag. It is placed inside the <video> or <audio> tags.

Let's take a small example:

<track
    kind=[track type]
    src=[path to the subtitle file]
    srclang=[language code]
    label=[track description] />

The <track> tag consists of four important attributes:

1. kind: Defines the type of track. For example:
   1. "subtitles" for subtitles;
   2. "captions" for captions detailing sounds and dialogues;
   3. "descriptions" for audio descriptions of visual content (such as an image);
   4. "chapters" to provide chapters of the audio or video track (and thus offer clickable elements);
   5. "metadata" for additional information.
2. src: Specifies the URL of the file containing the subtitles;
3. srclang: Defines the language of the track with an ISO 639-1 code, for example fr for French, en for English;
4. label: Adds a user-visible description that will be displayed on the player;
5. default: If this attribute is present, this track will be activated by default (useful when you have multiple subtitle languages).

Usage examples

For a video

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subtitles_fr.vtt" srclang="fr" label="French">
</video>

In this example:

• The first track (English) is activated by default thanks to the default attribute.
• A second track in French is available.

For an audio track

<audio controls>
  <source src="audio/podcast.mp3" type="audio/mpeg">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</audio>

Here, we offer an audio file "audio/postcast.mp3" followed by a subtitle track "captions_en.vtt" in English.

Attributes

Attributes specific to the <track> tag

General attributes

All classic attributes such as title, class, or id can also be used on the <track> tag.

Browser compatibility