HTML <track> Tag

The HTML <track> tag is used to specify text tracks for <video> and <audio> elements. It provides captions, subtitles, descriptions, or metadata to improve accessibility and usability for multimedia content. The <track> tag does not have a closing tag and is a self-closing element.

The <track> tag is commonly used to provide subtitles for videos, making them accessible to users who are deaf or hard of hearing, or to support translations into other languages.

Basic Syntax of HTML <track> Tag

The basic syntax of the <track> tag is:

</>
Copy
<track src="file.vtt" kind="subtitles" srclang="en" label="English Subtitles">

The attributes of the <track> tag determine the type of text track and how it is displayed to the user.

Attributes of HTML <track> Tag

  • src: Specifies the URL of the track file (e.g., .vtt format).
  • kind: Specifies the type of track. Possible values include:
    • subtitles: Subtitles for the video.
    • captions: Captions for the hearing impaired.
    • descriptions: Descriptions of the content.
    • chapters: Navigation points in the media.
    • metadata: Track metadata.
  • srclang: Specifies the language of the track (e.g., en for English).
  • label: Provides a user-friendly title for the track.
  • default: Indicates that the track is the default if multiple tracks are available.

Example of Subtitles for a Video

The following example demonstrates how to use the <track> tag to add English subtitles to a video:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Video with Subtitles</h2>
        <video controls width="600">
            <source src="example.mp4" type="video/mp4">
            <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English Subtitles" default>
            Your browser does not support the video tag.
        </video>
    </body>
</html>

Explanation: The <track> element adds English subtitles from the subtitles-en.vtt file, and it is set as the default track.

Example with Multiple Tracks

You can include multiple <track> elements for different languages or track types:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Video with Multiple Tracks</h2>
        <video controls width="600">
            <source src="example.mp4" type="video/mp4">
            <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English Subtitles" default>
            <track src="subtitles-es.vtt" kind="subtitles" srclang="es" label="Spanish Subtitles">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

Explanation: This example includes English and Spanish subtitles. The English track is set as the default.

Styling and Using Captions

By default, browser controls render captions or subtitles. However, you can also style or manipulate tracks using JavaScript.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            video::-webkit-media-text-track-display {
                background: rgba(0, 0, 0, 0.7);
                color: #fff;
                font-size: 16px;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Captions</h2>
        <video controls width="600">
            <source src="example.mp4" type="video/mp4">
            <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English Subtitles" default>
            Your browser does not support the video tag.
        </video>
    </body>
</html>

Explanation: The CSS styles customize the appearance of the captions, adding a semi-transparent background and white text.

Practical Applications of the <track> Tag

  • Subtitles: Provide subtitles in different languages for videos.
  • Captions: Offer captions for accessibility, particularly for the hearing impaired.
  • Descriptions: Add descriptive tracks for visually impaired users to understand video content.
  • Metadata: Use metadata tracks to include additional information or context about the video.
  • Chapter Navigation: Implement chapter markers for easy navigation within long videos.