What does this snippet demonstrate?

This snippet demonstrates how to use the HTML <track> element. It is used as a child of the media elements, such as <audio> and <video>. It allows designers to specify timed text tracks (or time-based data), such as subtitles.

Attributes:

default: Indicates that the track should be enabled unless the user’s preferences indicate that another track is more appropriate.
kind: Specifies how the text track is meant to be used (e.g., captions, subtitles, descriptions).
label: Provides a user-readable title for the text track.
src: Specifies the address of the track (.vtt file).
srclang: Defines the language of the track text data.

HTML

<div class="video-container">
<video controls src="lord-of-the-rings.mp4">
<track default kind="captions" srclang="en" src="lotr.vtt" />
</video> 
</div>

WEBVTT

WEBVTT
Kind: captions
Language: en


00:00:06.210 --> 00:00:09.418 position:50% align:center size:100% line:80%
I WISH THE RING 
HAD NEVER COME TO ME

00:00:11.000 --> 00:00:12.397 position:50% align:center size:100% line:80%
I WISH NONE OF THIS 
HAD HAPPENED

00:00:13.163 --> 00:00:16.023 position:50% align:center size:100% line:80%
SO DO ALL WHO LIVE 
TO SEE SUCH TIMES

00:00:16.121 --> 00:00:18.193 position:50% align:center size:100% line:80%
BUT THAT IS NOT 
FOR THEM TO DECIDE

00:00:19.009 --> 00:00:20.210 position:50% align:center size:100% line:80%
ALL WE HAVE TO DECIDE IS

00:00:20.388 --> 00:00:23.210 position:50% align:center size:100% line:80%
WHAT TO DO WITH THE TIME 
THAT IS GIVEN TO US

00:00:26.188 --> 00:00:28.000 position:50% align:center size:100% line:80%
THERE ARE OTHER FORCES AT WORK
IN THIS WORLD, FRODO!

00:00:28.232 --> 00:00:30.000 position:50% align:center size:100% line:80%
BESIDES THE WILL OF EVIL

CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

.demo-container {
  background-color: #000000;
}

.video-container {
  margin: 0 auto;
  max-width: 640px;
} 

video {
  width: 100%;
}

video::cue {
  font-family: "Oswald", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5rem;
  background-color: transparent;
  color: rgba(245, 245, 245, 0.6);
}

HTML and CSS

Track

What does this snippet demonstrate?

Attributes:

About the author