HTML / HTML Tags

HTML <Track> Tag

Dec 12, 2022
3 min read
HTML track Tag

Definition

A <track> element is used as a child of the <audio> or <video> elements to define a text track, such as captions, subtitles, or descriptions.

Example

<video controls
       src="/rise-of-theskywalker.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/rise-of-theskywalker.vtt" />
    Sorry, your browser doesn't support embedded videos.
</video>

Usage

  • An opening tag is required.
  • No closing tag should be used, as it is an empty element.
  • The <track> element must be a child of a media element, such as an <audio> or <video> element, before any flow content.
  • The type of track to be used is dependant on the kind attribute, and include captions, chapters, descriptions, metadata, and subtitles.
  • The <track> element refers to a source file containing the timed text.
  • The source file uses the WebVTT format with the .vtt extension. An example .vtt file is below:
    WEBVTT
    
    00:00:00.000 --> 00:00:01.399  line:80%
    The First Order was just the beginning...
    
    00:00:01.400 --> 00:00:01.899 line:80%
    I will give you so much more...
    
    00:00:01.900 --> 00:00:02.299 line:80%
    You'll die first.
    
    00:00:02.300 --> 00:00:02.999 line:80%
    I have died before.

Attributes

The track element supports the Global Attributes, along with the following:

  • default

    The default attribute specifies that the text track should be enabled.

  • kind

    The kind attribute specifies the kind of text track to use. The default value is subtitles.

    Values can include:

    • captions - This provides a transcription or translation of the dialogue, along with any sound effects or other relevant audio information. The text is overlaid on the video and is suitable for muted video or where the user is deaf or hard-of-hearing.
    • chapters - Tracks intended for use from a script, for example, when navigating the media resource.
    • descriptions - This provides an a textual description of the video content, and is suitable for users who are blind, or if the video cannot be seen.
    • metadata - Tracks intended for use from a script. Metadata information is not visible to the user.
    • subtitles - This provides text, overlaid on a video, of a translation or transcription of the dialogue. It is suitable when the user does not understand the language.
  • label

    The label attribute specifies a user-readable title of the text track.

  • src

    The src attribute specifies the URL address of the track file. This must have the same origin as the video or audio file unless crossorigin is enabled on the parent <audio> or <video> element.

  • srclang

    The srclang attribute specifies the language of the track’s text data. It is a required attribute when the kind attribute value is subtitles.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes