The track element may be used to define which text track to attach to a media element, whether it's an audio or video.

This element must always be used in combination with an <audio> or a <video> element or otherwise will not matter. The idea behind the <track> tag is to provide accessibility to a multimedia resource; that is because it allows us to add caption, transcripts, descriptions, and subtitles to the chosen media.

The <track> element is frequently used with the videos, rather than audios because it provides us to enter subtitles in multiple languages and additional aid to hearing impaired.

Syntax:

<audio|video><track /></audio|video>

Attributes:

  • src - Provides the path of the text track data file in form of URL. The file has to be in a specific format, such as a WebSRT or WebVTT. This attribute is required.
  • srclang - Indicates the language of the text track data.
  • kind - Specifies what kind of data the track provides for the specific media element. Following values are allowed:
    • captions - Captions may be a full transcription of the dialogue, a sound effect or any other valid data; the captions will be used when audio/video is not available and are suitable for impaired visitors.
    • chapters - Specifies chapter titles (if any) and may be suitable for navigating the media content.
    • subtitles - Provides a full transcription of the dialogue and is suitable when the audio of the media source is not understanable. This is the default value.
    • descriptions - Provides textual description of the video media and is suitable when visual information is not available.
    • metadata - As always, it contains data about the media source used. It is not displayed on a browser in any way.
  • label - Defines a title for the track. This title will be readable by users and will carry unique across track elements.
  • default - If selected it will tell the browser that the track must be enabled (unless user preferences indicate otherwise).
  • global attributes
  • event attributes

To really use a track element we need to create a WebVTT file. That is really easy to do; we just need a regular text editor, for instance a WordPad and initiate the text with WEBVTT. The example below shows a typical .vtt file:

WEBVTT

1

00:00:00.000 --> 00:00:10.000

Track element is a really cool feature in HTML5.

2

00:00:12.000 --> 00:00:18.000

You need a regular text editor,

let say a WordPad.

3

00:00:20.000 --> 00:00:25.000

And use the format explained

in tutorial above this example.

Example

The track element in HTML5 example:

 

›› go to examples ››