Adding Captions to Videos

To add captions or subtitles to a video, use the track element within the video element. This allows you to specify a text file (usually in .vtt format) that contains the timed captions.

Captions are essential for making your video content accessible to users with hearing impairments. They also improve the experience for viewers who prefer to watch videos without sound.

The Basic Syntax

In its simplest form, you can add captions to your video like this:

Key Attributes

src: This specifies the URL of the text track file (.vtt).
kind: This describes the type of track (e.g., captions, subtitles, descriptions, chapters).
srclang: This identifies the language of the track (e.g., en, es, fr). It is usually required if kind is set to subtitles.
label: This provides a human-readable label for the track that will be displayed to the user.
default: If present, the browser will enable this track automatically.

Interactive Example

Below is a working example of a video with an English caption track:

View Output Full Screen Preview

The WebVTT Format

The text files used for captions must follow the WebVTT (Web Video Text Tracks) format. A simple .vtt file looks like this:

WEBVTT

1
00:00:01.000 --> 00:00:05.000
This is the first caption.

2
00:00:05.000 --> 00:00:10.000
This is the second caption.

The first line of the file must be WEBVTT. Each caption is then preceded by a time range in the HH:MM:SS.MS format.