HTML Tutorial

HTML Tag: <track>

Usage:

The <track> tag provides closed captions or subtitles for media content, such as videos and audios. It allows users to view text annotations that correspond to the audio or video being played.

Attributes:

  • kind: Specifies the type of text track, such as "subtitles" or "captions".
  • src: Provides the URL of the text track file (e.g., ".vtt file").
  • label: Defines a human-readable label for the text track (e.g., "English Subtitles").
  • srclang: Specifies the language code of the text track.

Examples:

  • Add subtitles to a video:
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles.vtt" label="English Subtitles">
</video>
  • Add closed captions to an audio file:
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track kind="captions" src="captions.vtt" label="English Captions">
</audio>

Exploring the <track> tag:

  1. Create an HTML file.
  2. Add a <video> or <audio> element.
  3. Include a <source> element that specifies the URL of the media file.
  4. Within the <video> or <audio> element, add a <track> element.
  5. Set the kind attribute to "subtitles" or "captions".
  6. Provide the URL of the text track file in the src attribute.
  7. Set the label attribute to a human-readable label for the text track.
  8. Save and open the HTML file in a browser.
  9. The text track will be available as a separate option in the media player controls.