HTML <track> Tag

The <track> tag is used to specify text tracks for media elements like <video> and <audio>. These text tracks can include subtitles, captions, descriptions, chapters, or metadata, making your multimedia content more accessible and interactive.

Syntax

<track src="url" kind="subtitles|captions|descriptions|chapters|metadata" srclang="language_code" label="text" default>

Attributes

Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French">
</video>

More Examples

Example 1: Adding Captions for Accessibility

This example demonstrates how to add captions to a video for accessibility purposes. Captions are crucial for users who are deaf or hard of hearing.

<video width="400" height="300" controls>
    <source src="video.mp4" type="video/mp4">
    <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" default>
</video>

Explanation:

• The kind attribute is set to captions, indicating this track provides a transcript of dialogues and sound effects.
• The default attribute ensures the captions are shown by default.
• captions_en.vtt is a VTT (WebVTT) file containing caption text and timings.

Example 2: Providing Audio Descriptions

This example shows how to provide audio descriptions for users who are visually impaired. Audio descriptions narrate the visual actions and elements present in the video.

<video width="400" height="300" controls>
    <source src="video.mp4" type="video/mp4">
    <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Audio Descriptions">
</video>

Explanation:

• The kind attribute is set to descriptions, indicating this track provides an audio narration of the video's visual content.
• Users can activate the audio description track through the video player.

Example 3: Using Chapter Markers for Navigation

This example showcases how to use chapter markers to enhance navigation within a longer video. Chapter tracks divide the content into sections for easier access.

<video width="400" height="300" controls>
    <source src="long_video.mp4" type="video/mp4">
    <track src="chapters.vtt" kind="chapters" label="Chapters">
</video>

Explanation:

• The kind attribute is set to chapters, providing the user with a list of chapter markers in the video's controls.
• The content of the VTT file contains the chapter titles and their starting time codes.

Example 4: Metadata Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="metadata.vtt" kind="metadata" label="Metadata track">
</video>

Explanation:

• The kind attribute is set to metadata.
• The content of the VTT file could contain JSON or any kind of custom data related to this video.

Browser Support

Notes and Tips

• VTT Files: The <track> tag requires text track data to be in WebVTT (.vtt) format.
• Accessibility: Utilizing <track> elements significantly improves the accessibility of your media content, catering to a wider range of users.
• Multiple Tracks: You can include multiple <track> elements within a single <video> or <audio> element, providing different languages or types of tracks.
• Default Language: Use the default attribute on one of the <track> tags to set the default language when available.
• Dynamic Switching: Media players typically allow users to switch between available track options during playback.
• JavaScript Interaction: Use JavaScript to dynamically enable or disable text tracks, or to manipulate the content based on user actions or preferences.

• WebVTT Format:

  • WebVTT files are plain text files using a simple format.

  • Each entry consists of a timecode line, followed by the text:

    00:00:00.000 --> 00:00:05.000
    This is the first subtitle.
    
    00:00:05.000 --> 00:00:10.000
    Here comes the second line.
    

• Use label for Clarity: The label attribute is important because it gives users an idea of what the track contains when they select it from the media player's track options.
• Use srclang appropriately: Use ISO language codes. for clear international usage.