By Jonathan Griffin. Editor, SEO Consultant, & Developer.
<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>
- An opening tag is required.
- No closing tag should be used, as it is an empty element.
<track>element must be a child of a media element, such as an
<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.
<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.
The track element supports the Global Attributes, along with the following:
defaultattribute specifies that the text track should be enabled.
kindattribute specifies the kind of text track to use. The default value is
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.
labelattribute specifies a user-readable title of the text track.
srcattribute specifies the URL address of the track file. This must have the same origin as the video or audio file unless
crossoriginis enabled on the parent
srclangattribute specifies the language of the track’s text data. It is a required attribute when the
kindattribute value is
|Android Webview||Chrome Android||Firefox Android||Opera Android||iOS Safari||Samsung Internet|