This element must always be used in combination with an <audio> or a <video> element or otherwise will not matter. The idea behind the <track> tag is to provide accessibility to a multimedia resource; that is because it allows us to add caption, transcripts, descriptions, and subtitles to the chosen media.
The <track> element is frequently used with the videos, rather than audios because it provides us to enter subtitles in multiple languages and additional aid to hearing impaired.
- src - Provides the path of the text track data file in form of URL. The file has to be in a specific format, such as a WebSRT or WebVTT. This attribute is required.
- srclang - Indicates the language of the text track data.
- kind - Specifies what kind of data the track provides for the specific media element. Following values are allowed:
- captions - Captions may be a full transcription of the dialogue, a sound effect or any other valid data; the captions will be used when audio/video is not available and are suitable for impaired visitors.
- chapters - Specifies chapter titles (if any) and may be suitable for navigating the media content.
- subtitles - Provides a full transcription of the dialogue and is suitable when the audio of the media source is not understanable. This is the default value.
- descriptions - Provides textual description of the video media and is suitable when visual information is not available.
- metadata - As always, it contains data about the media source used. It is not displayed on a browser in any way.
- label - Defines a title for the track. This title will be readable by users and will carry unique across track elements.
- default - If selected it will tell the browser that the track must be enabled (unless user preferences indicate otherwise).
- global attributes
- event attributes
To really use a track element we need to create a WebVTT file. That is really easy to do; we just need a regular text editor, for instance a WordPad and initiate the text with WEBVTT. The example below shows a typical .vtt file:
00:00:00.000 --> 00:00:10.000
Track element is a really cool feature in HTML5.
00:00:12.000 --> 00:00:18.000
You need a regular text editor,
let say a WordPad.
00:00:20.000 --> 00:00:25.000
And use the format explained
in tutorial above this example.
The track element in HTML5 example: