Issue #17 - the track element

published on

The track element allows you to specify timed text tracks (e.g. captions or subtitles) for media elements.

<video src="workshop_promo.mp4" controls>
  <track default kind="captions" srclang="en" src="workshop_promo.vtt" label="English">
  <track kind="subtitles" srclang="de" src="workshop_promo_de.vtt" label="Deutsch">
  Sorry, your browser doesn't support embedded videos.
</video>

If you want to provide captions or subtitles for a <video>, you can use the native <track> element in HTML.
Here's the result of the above code:

Your browser should automatically show captions in English and somewhere in the controls there's should be an additional button that allows you to switch or turn the text track off.

There are several attributes you can use with the track element.

  • src specifies the path to the .vtt file that contains the text.
  • kind defines the type of text track you're adding.
    “subtitles” for translations of the spoken content
    “captions” for a transcript of the audio and important non-verbal information.
    “descriptions” for textual descriptions of the video content. (doesn't seem to work in any browser)
    “chapters” and “metadata” are tracks intended for use from script. Not displayed by the user agent.
  • label gives a user-readable title for the track, displayed in the video's UI.
  • srclang defines the language of the text track.
  • default defines the default track.

CSS

It's possible to style captions and subtitles using CSS. Visit MDN for a list of supported properties.

::cue {
  background-color: red;
}

The block below is editable. If you change the value of the background-color property, the color of the cue in the video at the top of the page should change accordingly (On macOS: Firefox only, Windows: Chrome and Firefox).

JavaScript

There's a cuechange event in JavaScript that fires when a text track has changed the currently displaying cues. Select the English track (default) and open the console to see it in action while the video is playing.

let textTrackElem = document.querySelectorAll("track")[0];

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
  console.log(cues)
});

.vtt

In case you were wondering how the .vtt file for the English track looks like.

WEBVTT

00:00:00.240 --> 00:00:07.040
Hi! My name is Manuel and if you know me, you know
that I like to complain about HTML others have

00:00:07.040 --> 00:00:14.880
written. I post about it on Twitter, I even have a
website called htmhell.dev where I post bad code,

00:00:14.880 --> 00:00:20.400
but complaining is not the only thing I can do.
I can also, and I also like to, share my knowledge

00:00:20.400 --> 00:00:25.440
and this is why I've teamed up with my friends
at Smashing Magazine. We've prepared a workshop

00:00:25.440 --> 00:00:31.840
called “Deep dive on accessibility testing” where
I show you how I use automatic testing tools,

00:00:31.840 --> 00:00:38.160
browser extensions and even CSS and JavaScript,
manual testing, like testing with the keyboard

00:00:38.160 --> 00:00:43.760
and screen readers, to discover these bad
things, to discover accessibility issues.

00:00:43.760 --> 00:00:49.520
If that sounds interesting, it would be great if
you would join me for my workshop. Below the video

00:00:49.520 --> 00:00:56.560
you will find a special link with a discounted
price just for you. I hope to see you soon! Tthanks!

Resources

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.