- Element of
- HTML Media
- What does
<track> HTML Tagdo?
- The <track> element is used as a child of an <audio> or <video> element and adds a time-based data source to the parent media element. For example, the <track> element can be used to add timed subtitles to a video and closed captions to audio content.
<video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls> <track kind="subtitles" src="subtitles_de.vtt" srclang="de"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja"> Sorry, your browser doesn't support HTML5 <code>video</code>, but you can download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet Archive</a>. </video>
This video includes three text tracks. All four include subtitles in a different language. Available subtitle languages include German, English, and Japanese.
Why Provide Tracks?
Tracks ensure that all users have access to content presented in audio and video files regardless of their language or any physical limitations. They remove accessibility and languages barriers and ensure that users can fully understand the content presented in video or audio format. As such, tracks represent an important internationalization and accessibility feature.
There are several attributes that can be applied to a
track element to give the browser more information about the linked track.
kindattribute can be used to identify the kind of data contained in the track:
labelattribute is a text label applied to the track and read by the user when the user is selecting between available tracks.
srcattribute specifies a URL where the track file, in .vtt format, is located. This is the only required
srclangattribute identifies the language of the text data. If the
kindis set to
kindis ommitted (
subtitlesis the default value of
kind), then the
defaultattribute is used to identify the
trackthat will be played by default unless the user selects and alternate