Captions and transcripts

Media controls let someone play a video. Captions let them understand the audio without sound.

Add captions with a track element:

<video controls src="repair.mp4">
  <track
    kind="captions"
    src="repair-en.vtt"
    srclang="en"
    label="English"
    default
  >
</video>

Reload the page, start the video, and turn captions on in the player. You should see timed text appear over the video as each cue is reached.

The caption file uses WebVTT. A small example looks like this:

WEBVTT

00:00:00.000 --> 00:00:03.500
Place the bicycle on a stable surface.

00:00:03.500 --> 00:00:06.000
[bicycle bell rings]

Good captions include spoken words and meaningful sounds. Identify the speaker when the image does not make that clear.

Do not publish automatic captions without reviewing them. Names, technical terms, and punctuation often need correction. I treat auto-captions as a draft, not a finished accessibility feature.

A transcript presents the same information as normal page text. It helps people who prefer reading, who use translation tools, or who cannot play the media at all. Link it near the player:

<p><a href="repair-transcript.html">Read the transcript</a></p>

Audio-only content needs a transcript too. If the recording refers to something visual, describe that information in the transcript text.

Captions and transcripts are not interchangeable. Captions follow the timing of the media. A transcript is easier to scan and search.

The simplest rule: do not make sound the only way to receive important information.

If you add a short screen recording to your my-page project later, pair it with a transcript page or paragraph summary. Mute your computer, play the video, and confirm you still get the message from captions or text alone.

Even a three-line WebVTT file is enough to prove the wiring works before you polish the wording.

Save the .vtt file next to the video with the path you use in track src. A wrong path gives you a player with no caption option and no obvious error on the page itself.