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
kindattribute, 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
.vttextension. An example.vttfile 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:
defaultThe
defaultattribute specifies that the text track should be enabled.kindThe
kindattribute 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.
labelThe
labelattribute specifies a user-readable title of the text track.srcThe
srcattribute specifies the URL address of the track file. This must have the same origin as the video or audio file unlesscrossoriginis enabled on the parent<audio>or<video>element.srclangThe
srclangattribute specifies the language of the track’s text data. It is a required attribute when thekindattribute 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 |
