DEV Community

Cover image for HTML tags | track
Carlos Espada
Carlos Espada

Posted on • Edited on

1

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay