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:
- Open a text editor.
- On the first line of the editor write WEBVTT.
- A blank line is then left.
- The time duration is specified in a proper format.
- Numbering and CSS can also be added.
- The required text is then entered.
- Repeat the steps 3 to 5 until it is finished.
- The file is saved with the .vtt extension.
- 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.
