Issue #17 - the track element

Recently I posted a video on my blog and I wanted to add captions. I knew about the track element, but I didn’t know how it worked. Looking it up I learned so much more than expected. In this post I’m sharing my learnings with you. Enjoy!

Have a great weekend,
Manuel

View this issue in the browser.

HTMHell Newsletter Issue #17 - the track element

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.

/* Might not work in all OS and browsers combinations despite good support for the selector. */
::cue {
  background-color: red;
}

JavaScript

There's a cuechange event in JavaScript that fires when a text track has changed the currently displaying cues.

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

• 4.8.11 The track element
• <track>: The Embed Text Track element (MDN)
• TextTrack: cuechange event (MDN)
• ::cue (MDN)

Read this issue in your browser or share it with others: htmhell.dev/tips/the-track-element/