HTML <track> tag is used to define time-based text tracks for a media file. The <track> tag must use as child element of <audio> and <video> elements.
The <track> tag is employed to insert subtitles, captions, or any other type of text that appears during the playback of a media file.
HTML <track> is new tag in HTML5.
Syntax
<track src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" kind=" " srclang=" " label=" ">
Following are some details regarding the HTML <track> element:
| Display | None |
|---|---|
| Start tag/End tag | Only start tag(End tag forbidden) |
| Usage | HTML media |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML track Tag</title>
</head>
<body>
<h2>Example of track tag</h2>
<video controls="controls">
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/mp4">
<track src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" kind="subtitles" srclang="en" label="English">
Sorry!Your browser does not support the track
</video>
</body>
</html>
In the previous example, the flower.vtt file was employed to incorporate subtitles into the video file. Below is the content of the flower.vtt file:
How to create WEBVTT file:
Following are some basic steps to create WEBVTT file for <track> tag:
- Open text editor in your PC such as Notepad
- Write WEBVTT as the first line in the editor
- Leave a blank line
- Specify the time duration in the proper format (you can also provide numbering and add CSS).
- Enter and write your text which you want to add a subtitle or caption, and repeat step 3 to 5 until you finish it.
- Save it using .vtt extension.
Now your WEBVTT file is ready to use.
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
| default | default | It specifies that the track should be enabled unless the user?s preferences indicate that another track is more important. |
kind |
captionschaptersdescriptionsmetadatasubtitles | It specifies that which type of text track you want to add. |
| label | text | It specifies the title of the text track. |
src |
URL | It defines the URL of the track file. |
| srclang | language_code | It defines the language of the track text content, such as English, Germany, etc. |
Global attribute:
The <track> tag is compatible with the Global attributes in HTML.
Event attribute:
The <track> tag facilitates the utilization of Event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<track> |
Yes | Yes | Yes | Yes | Yes |