<track> HTML Tag

Element of

Every Way Possible To Embed Modern Media With HTML Code

What does <track> HTML Tag do?

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.

Display

none

Code Example

<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.

Track Attributes

There are several attributes that can be applied to a track element to give the browser more information about the linked track.

• The kind attribute can be used to identify the kind of data contained in the track: subtitles, captions, descriptions, chapters, or metadata.
• The label attribute is a text label applied to the track and read by the user when the user is selecting between available tracks.
• The src attribute specifies a URL where the track file, in .vtt format, is located. This is the only required track element attribute.
• The srclangattribute identifies the language of the text data. If the kind is set to subtitles or if kind is ommitted (subtitles is the default value of kind), then the srclang is required.
• The default attribute is used to identify the track that will be played by default unless the user selects and alternate track.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.