<track> element is used to specify timed text tracks for media elements like
<audio>. These tracks may include subtitles, captions, descriptions, chapters, or metadata, providing various functionalities such as translations, transcriptions, and navigational aids. The tracks are typically formatted in a WebVTT format (with a
Examples and Usage
For a diverse audience with varying needs and preferences, integrating multimedia elements thoughtfully is crucial. Leveraging the
<track> element can help create a more inclusive and enriched experience. With this in mind, let's explore how a potential implementation would take place.
<video controls poster="preview-image.jpg"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" src="english-subtitles.vtt" srclang="en" label="English" default> <track kind="subtitles" src="spanish-subtitles.vtt" srclang="es" label="Spanish"> <track kind="captions" src="captions.vtt" srclang="en"> <track kind="descriptions" src="descriptions.vtt" srclang="en"> <track kind="chapters" src="chapters.vtt" srclang="en"> <p>Your browser does not support the video tag.</p> </video>
The breakdown of this setup is as follows:
<video>Element: The main container for video playback. The
controlsattribute provides play, pause, and volume controls, while
posteroffers a preview image shown before playback starts.
Source Elements: Multiple
<source>tags ensure video compatibility across different browsers. WebM format is placed first as it's an open standard, followed by the more common MP4 format.
Subtitles: The tracks for English (set as default) and Spanish provide translation of dialogues. The
labelattribute gives viewers a selection option in the video controls.
Captions: This track provides a transcription of significant audio content, aiding those with hearing impairments.
Descriptions: A text description of video scenes for the visually impaired. This content can be read by screen readers.
Chapters: Useful for longer videos, this track divides the content into navigable sections, enhancing user experience.
Fallback Message: Enclosed in a paragraph tag, this message serves as an alert for users with browsers that don't support the video playback.
This illustrative example demonstrates the multifaceted functionality of the
<track> element, making the video content accessible and engaging for a wide array of viewers. In addition, the inclusion of metadata tracks could allow developers to synchronize additional content or interactions with specific video segments, adding another layer of interactivity.
<track> element comes with a set of specific attributes to customize its behavior, in addition to global HTML attributes.
|Specifies that the track should be enabled by default if the user's preferences do not indicate otherwise. Only one track element per media element can have this attribute.|
|Defines the kind of text track, such as "subtitles," "captions," "descriptions," etc. If omitted, the default kind is "subtitles."|
|Provides a user-readable title for the track that can be displayed in the user interface.|
|Specifies the source URL of the track file, pointing to a |
|Defines the language of the track text, using a valid BCP 47 language tag. Must be defined if the |
As we observed previously, the
<track> element has a vital role in improving the accessibility of multimedia content. From a more technical standpoint, it does not have a corresponding ARIA role, and no specific ARIA roles or attributes are permitted for this element.
<track>element must be a child of either the
The WebVTT format structures the text track with cues, timings, and optional settings for alignment and styling. It allows for the positioning of captions and the styling of cues using CSS. More details can be found here.
kindattribute can take values such as "subtitles," "captions," "descriptions," "chapters," or "metadata." These represent different uses of the text track, such as translation of dialogue, transcription of audio, textual description of video content, chapter titles, or tracks used by scripts.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.