HTML Track Tag

In HTML, the <track> tag is used as a child of <video> and <audio> tags.

  • The <track> tag allows us to specify timed tracks Like for example, it allows you to automatically handle subtitles.

  • Whenever we play a video then we see subtitles or captions on video these are possible with the help of this <track> tag.

  • It is an empty element.

HTML <track> Tag Syntax and Usage

As <track> is an empty element; so it requires start tag only and it does not require an end tag.

Following is the syntax for using the track tag in your HTML code:

<track attribute_name=" ">

HTML <track> tag Attributes

The <track> tag supports both global and event attributes and some of the common attributes are given below.

1. Default

The default attribute is used to indicate that the track should be enabled until and unless the user's preference indicate that the track is more important.

2. Label

The label attribute of the title track is a user-readable title of text track which is used at the time of listing the available text tracks by the browser

3. Src

The src attribute is used to specify the URL and the origin of the document and URL should be the same.

4. Srclang

This attribute specifies the language of the track text data.

5. Kind

This attribute is used to specify the kind of text track.Its possible values are:- descriptions ,captions,chapters ,metadata.

HTML <track> Tag Basic Example

Below we have a basic example showing how we use the HTML track tag

<video controls width="250"
       src="/media/examples/abc.mp4">

    <track default kind="captions"
           srclang="en"
           src="/media/examples/abc.vtt"/>

    Sorry, your browser doesn't support embedded videos.
</video>

Browser Support for HTML <track> Tag

Following browsers support this attribute:

  • Google Chrome 23.0+

  • Internet Explorer 10.0

  • Firefox 31.0

  • Opera 12.1+

  • Safari 6.0