The <track> HTML element 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.
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.
<div class="video-container">
<video controls src="lord-of-the-rings.mp4">
<track default kind="captions" srclang="en" src="lotr.vtt" />
</video>
</div>
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
@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);
}