Definition
A <track>
element is used as a child of the <audio>
or <video>
elements to define a text track, such as captions, subtitles, or descriptions.
Example
<video controls
src="/rise-of-theskywalker.mp4">
<track default
kind="captions"
srclang="en"
src="/rise-of-theskywalker.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
Usage
- An opening tag is required.
- No closing tag should be used, as it is an empty element.
- The
<track>
element must be a child of a media element, such as an<audio>
or<video>
element, before any flow content. - The type of track to be used is dependant on the
kind
attribute, and include captions, chapters, descriptions, metadata, and subtitles. - The
<track>
element refers to a source file containing the timed text. - The source file uses the WebVTT format with the
.vtt
extension. An example.vtt
file is below:WEBVTT 00:00:00.000 --> 00:00:01.399 line:80% The First Order was just the beginning... 00:00:01.400 --> 00:00:01.899 line:80% I will give you so much more... 00:00:01.900 --> 00:00:02.299 line:80% You'll die first. 00:00:02.300 --> 00:00:02.999 line:80% I have died before.
Attributes
The track element supports the Global Attributes, along with the following:
default
The
default
attribute specifies that the text track should be enabled.kind
The
kind
attribute specifies the kind of text track to use. The default value issubtitles
.Values can include:
captions
- This provides a transcription or translation of the dialogue, along with any sound effects or other relevant audio information. The text is overlaid on the video and is suitable for muted video or where the user is deaf or hard-of-hearing.chapters
- Tracks intended for use from a script, for example, when navigating the media resource.descriptions
- This provides an a textual description of the video content, and is suitable for users who are blind, or if the video cannot be seen.metadata
- Tracks intended for use from a script. Metadata information is not visible to the user.subtitles
- This provides text, overlaid on a video, of a translation or transcription of the dialogue. It is suitable when the user does not understand the language.
label
The
label
attribute specifies a user-readable title of the text track.src
The
src
attribute specifies the URL address of the track file. This must have the same origin as the video or audio file unlesscrossorigin
is enabled on the parent<audio>
or<video>
element.srclang
The
srclang
attribute specifies the language of the track’s text data. It is a required attribute when thekind
attribute value issubtitles
.
Specification
Browser Support
Desktop
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |