The Track Element3:51 with Nick Pettit
Caption files won't work without adding a track element. In this video, we'll learn how to use a WebVTT file as a text track.
- <track> - The track element specifies timed text data for video and audio media.
Now we've created our caption file, but 0:00 just creating that file isn't quite enough. 0:03 It's not just going to magically appear in the video that we want it to appear in, 0:06 we actually need to include it into our HTML file, just like any other file. 0:12 So right here under video, we're going to add 0:17 a new element that we haven't seen yet called track. 0:21 So let's type out the track element, and 0:26 this is a self closing element just like the sources. 0:29 And we'll label this with the label attribute, and 0:33 we'll say, this is an English track. 0:38 Now, I should point out. 0:42 This is not necessarily labelling the language in particular. 0:42 It could label, for example, director's commentary. 0:48 Or any other thing that you might want to include as a text track. 0:53 However in this case it's just the English subtitles for this particular video. 0:59 For kind the kind attribute we're going to say capture you will notice this work 1:05 space automatically completing this and is giving us a couple of other options here. 1:11 One of those options is subtitles. 1:18 And actually we're going to choose subtitles only because that has a tendency 1:20 to have slightly better compatibility than captions in some specific situations. 1:26 So we're going to choose subtitles hover technically these are captions 1:31 because subtitles are typically what you use to translate into another language. 1:37 These are technically just captions because they're sort of just captioning 1:45 what’s happening in the video. 1:49 However we're going to choose subtitles for compatibility reasons. 1:51 For source language, this is where you want to specify a language. 1:55 We're going to say en for English and 2:02 then for the source attribute. 2:06 We're going to say bridge-captions.vtt, 2:10 because that's the file that we just created. 2:14 And it's in the same directory as the HTML. 2:18 So we don't need to specify a folder. 2:21 And then, for the last attribute, we're going to say Default. 2:25 Now why are we saying that? 2:30 Well we're going to have captions enabled by default, just so 2:31 we can easily see them. 2:35 You might want to remove this, but this means that this will be the track that's 2:36 selected by default, and it will display it by default. 2:41 So let's save that out, switch over to our example and 2:44 I want you to watch the player controls down here very closely. 2:49 We'll refresh the page and as you can see, there's now this little CC button. 2:54 That stands for Closed Captioning. 2:59 So if we hit play, and we'll mute the audio. 3:02 You can see that we now have these subtitles here. 3:06 And that's pretty nice if you're not able to watch the video with audio for 3:10 some reason or another. 3:14 Kinda tells you what's going on. 3:16 But if we re-enable captions, or re-enable audio rather, 3:18 you can see that it matches up pretty well to what's actually going on. 3:22 Like any HTML element there's a lot more you can do with video and 3:30 audio, that about covers the basics. 3:35 If you'd like to learn more about anything that we've talked about, 3:38 be sure to check out the notes associated with each video, 3:42 and familiarize yourself with the official documentation. 3:45
You need to sign up for Treehouse in order to download course files.Sign up