track HTML

by

HTML <track> Tag

To specify time-based text tracks for a media file, the HTML <track> tag is used as a child element of <audio> and <video> elements. Subtitles, captions, or any other form of text can thus be added by this tag which is displayed when a media file plays. It was introduced in HTML5.

Syntax:

<track src=" " kind=" " srclang=" " label=" ">

Example:

<!DOCTYPE html>  
<html>  
<body>  
 <h2>Example of HTML <track> Tag:</h2>  
<video width="320" height="240" controls>
  <source src="horse.mp4" type="video/mp4">
  <track src="horse.vtt" kind="subtitles" srclang="en" label="English">
</video>
</body>  
</html>

Steps to create a WEBVTT file for <track> tag:

  1. Open a text editor.
  2. On the first line of the editor write WEBVTT.
  3. A blank line is then left.
  4. The time duration is specified in a proper format.
  5. Numbering and CSS can also be added.
  6. The required text is then entered.
  7. Repeat the steps 3 to 5 until it is finished.
  8. The file is saved with the .vtt extension.
  9. The WEBVTT file is ready to use.

Tag specific Attributes:

Attribute Value Uses
default default Used to instruct that the track will be enabled if the other track is not indicated to be more appropriate by the user’s preferences.
kind captions

chapters

descriptions

metadata

subtitles

 Used to define the kind of text track.
label text Used to define the title of the text track.
src URL Used to define the URL of the track file and is a required attribute.
srclang language_code Used to define the language of the track text data and is a required attribute if kind=”subtitles”.

Global Attributes:

The HTML Global attributes are supported by the HTML <track> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <track> tag.

Supporting Browser:

Chrome, IE, Firefox, Opera, and Safari.