The track element in HTML adds text to video or audio elements in a timed manner. This can be useful for adding captions, titles, or any other form of textual descriptions required by the file. The track element is used as a child element to the audio or video elements. Moreover, the files added to the track element are of the format WebVTT (.vtt).
The track element is essential to audio and video elements for increasing their reach in terms of audience. With the addition of subtitles in different languages and captions, audio and video elements are more descriptive and understandable for a wider range of people.
To be able to use the track element, you must have sufficient knowledge regarding all its attributes and how you can use them. Following is a table that details each attribute and what it is used for:
Attribute | Description |
src | The file containing the text in .vtt format. |
kind | A description of the kind of file in the track. For example, subtitles, captions, descriptions, etc. |
srclang | The language used in the .vtt file. Each language has its own code, e.g., English = 'en'. The srclang attribute is compulsory if the kind attribute is subtitles. |
label | This is to label the track. In case of subtitles, this should be the language the subtitles are in, as this will be presented as an option to the viewers. |
default | A boolean attribute that enables one track unless the user specifies another one by default. |
The following example will help you understand the track element better. As shown below, track is a child element in the audio element. After specifying the source for the audio, we add the track element. The track element specifies the source of the subtitle files and that the subtitles are in the English language.
<video width="240" height="240" controls>
<source src="educative.mp4" type="video/mp4">
<source src="educative.webm" type="video/webm">
<track src="sub_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
Free Resources