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.
<track src=" " kind=" " srclang=" " label=" ">
<!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:
|default||default||Used to instruct that the track will be enabled if the another track is no indicated to be more appropriate by the user’s preferences.|
|Used to define the kind of the 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”.|
The HTML Global attributes are supported by the HTML <track> tag.
The HTML Event attributes are supported by the HTML <track> tag.
Chrome, IE, Firefox, Opera and Safari.