HTML Course 12.5 Subtitles and tracks in video (track: subtitles, captions)

HTML Course 12.5: Subtitles and tracks in video

Adding subtitles, captions, chapters or metadata to HTML5 video is done via the <track> element. Tracks improve accessibility and user experience by providing text-based information synchronized with the video.

The <track> element

The <track> element must be a child of a media element (<video> or <audio>). It is self-closing and provides metadata from an external file.

Attribute	Description
kind	Type of text track: `subtitles`, `captions`, `descriptions`, `chapters`, `metadata`.
src	URL of the track file (usually WebVTT, .vtt).
srclang	Language of the text track (BCP 47 language tag, e.g., `en`, `fr`).
label	Human-readable label shown in the player controls.
default	Boolean attribute. If present, this track is enabled by default.

Kinds of text tracks

subtitles: Dialogue translation for viewers who don’t understand the original language.
captions: Text of dialogue + non-speech info (e.g., “[door creaks]”) for Deaf or hard-of-hearing viewers.
chapters: Chapter markers, allowing quick navigation to sections.
descriptions: Audio descriptions of visual content for visually impaired viewers.
metadata: Time-aligned metadata for external processing (e.g., indexing).

Subtitles vs Captions

While both appear as on-screen text, subtitles focus on translating spoken words, and captions include additional identifiers (speaker names, sound effects). Use kind='subtitles' for translations and kind='captions' for accessibility.

File Format: WebVTT

WebVTT (Web Video Text Tracks) is the standard for HTML5 text tracks. Its syntax:

WEBVTT

00:00:00.000 --> 00:00:05.000
This is the first subtitle.

00:00:06.000 --> 00:00:10.000
This is the second subtitle.

Basic example with English subtitles

Multiple tracks (subtitles & captions)

Choosing the default track

Only one track should carry the default attribute. If the user’s browser language matches a srclang value and no default is set, the browser may auto-enable that track. For full control, always set default explicitly on the desired track.

Accessing tracks via JavaScript

You can programmatically read or switch tracks:

Best practices

Use WebVTT for compatibility and rich features (classes, alignment).
Provide captions (kind='captions') for accessibility.
Offer subtitles (kind='subtitles') in multiple languages.
Test tracks in various browsers and devices.
Ensure the srclang attribute matches the file’s language tag.

HTML Course 12.5 Subtitles and tracks in video (track: subtitles, captions)