Captions and subtitles in HTML

A video without a text track is a video some people cannot use.

<video controls width="640" height="360" poster="/img/poster.jpg"
       preload="metadata">
  <source src="/media/tour.webm" type="video/webm">
  <source src="/media/tour.mp4" type="video/mp4">
  <track kind="captions" src="/media/tour.en.vtt" srclang="en"
         label="English" default>
  <track kind="subtitles" src="/media/tour.fr.vtt" srclang="fr"
         label="Francais">
  <p>Your browser cannot play this. <a href="/media/tour.mp4">Download</a></p>
</video>

How it works

1. <track kind="captions"> carries the spoken words and the sounds.
2. default picks the track shown when the viewer has no preference.
3. srclang is the track's language; label is what the menu shows.

The run, in numbers

Lines

10

Characters to type

435

Tokens

88

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 70 seconds.

Type this snippet

Step 2 of 9 in Media & embeds, step 9 of 23 in Semantics & metadata.

← Previous Next →