DEV Community

Cover image for HTML tags | track
Carlos Espada
Carlos Espada

Posted on • Edited on

HTML tags | track

It is used to add timed text tracks to audio or video. To do this, they will be included as direct children of the <audio> and <video> elements using the WebVTT format (.vtt files), which means Web Video Text Tracks.

It has several attributes:

  • default: indicates that this text track should be activated if the user's preferences do not indicate that there is a more suitable one. It can only be used in one <track> element per media element.
  • kind: indicates how the text track should be used. If omitted, the default is subtitles. If it contains an invalid value, it will use metadata. It can take the following values:
    • subtitles: provides a translation of the content that the user cannot understand. For example, non-Spanish speech or text in a Spanish-language movie. Subtitles can include additional content, such as the text at the beginning of Star Wars movies or the date, time, and location of a scene (eg, 12h32. CIA Headquarters. Langley, Virginia).
    • captions: provides a transcription and possibly a translation of the audio. It can include important non-verbal information such as music tracks or sound effects. You can also indicate the origin or source of the audio (music, text, character, etc). It is suitable for deaf users or when the sound is muted.
    • descriptions: textually describe the content of the video. It is suitable for blind users or when the video cannot be seen.
    • chapters: defines the chapter titles that are used when the user navigates through the multimedia resource.
    • metadata: defines content used by scripts. They are not visible to the user.
  • label: indicates a user-readable text track title that the browser uses when listing available text tracks.
  • src: track address. It is a .vtt file and must be a valid URL. This attribute is required and the value of your URL must have the same origin as the document, unless the parent <audio> or <video> element has a crossorigin attribute.
  • srclang: indicates the language of the text track. It must be a valid BCP47 language tag. If the kind attribute has the value subtitles, then srclang becomes a required attribute.

A media element cannot have more than one <track> element with the same kind, srclang and label attributes.

  • Type: -
  • Self-closing: Yes
  • Semantic value: No

Definition and example | Support

Top comments (0)