<track>

track tag

The <track> tag in HTML defines text tracks for <video> and <audio> elements. It allows for subtitles, captions, or other synchronized text-based content. The <track> element must be inside a <video> or <audio> tag and supports various attributes to specify track details.

Syntax

<track kind="subtitles" src="subtitles.vtt" srclang="en" label="English subtitles">

track Demo

<video controls>
  <source src="/cs/html/videos/video1.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
  Your browser supports the video tag.
</video>

Attributes

• default: Specifies that this track should be enabled by default unless overridden by user settings. Only one track per media element can have this attribute.
• kind: Defines the type of track. If omitted or invalid, it defaults to "subtitles." Options include:
  • subtitles: Provides translations or dialogue context in a different language.
  • captions: Includes transcriptions of audio and non-verbal sounds for accessibility.
  • descriptions: Offers descriptions of visual elements for visually impaired users or when viewing isn't possible.
  • chapters: Allows navigation through different media sections.
  • metadata: Contains data for scripts but is not visible to users.
• label : A user-friendly title for the track, shown in the track selection menu.
• src: Specifies the URL of the track file, typically in .vtt format. This attribute is required.
• srclang: Indicates the language of the track text using a BCP 47 language tag. Required if kind is "subtitles."

Conclusion

The <track> tag in HTML is used to add text tracks for <video> and <audio> elements, enabling features like subtitles, captions, and other text-based content. It is placed inside a <video> or <audio> tag and can support various attributes like kind, label, and src to specify the type, language, and file location for the text track.