1 00:00:00,710 --> 00:00:03,604 Now we've created our caption file, but 2 00:00:03,604 --> 00:00:06,836 just creating that file isn't quite enough. 3 00:00:06,836 --> 00:00:12,384 It's not just going to magically appear in the video that we want it to appear in, 4 00:00:12,384 --> 00:00:17,621 we actually need to include it into our HTML file, just like any other file. 5 00:00:17,621 --> 00:00:21,677 So right here under video, we're going to add 6 00:00:21,677 --> 00:00:26,363 a new element that we haven't seen yet called track. 7 00:00:26,363 --> 00:00:29,536 So let's type out the track element, and 8 00:00:29,536 --> 00:00:33,626 this is a self closing element just like the sources. 9 00:00:33,626 --> 00:00:38,275 And we'll label this with the label attribute, and 10 00:00:38,275 --> 00:00:42,150 we'll say, this is an English track. 11 00:00:42,150 --> 00:00:42,950 Now, I should point out. 12 00:00:42,950 --> 00:00:48,430 This is not necessarily labelling the language in particular. 13 00:00:48,430 --> 00:00:52,600 It could label, for example, director's commentary. 14 00:00:53,790 --> 00:00:59,470 Or any other thing that you might want to include as a text track. 15 00:00:59,470 --> 00:01:05,284 However in this case it's just the English subtitles for this particular video. 16 00:01:05,284 --> 00:01:11,266 For kind the kind attribute we're going to say capture you will notice this work 17 00:01:11,266 --> 00:01:18,480 space automatically completing this and is giving us a couple of other options here. 18 00:01:18,480 --> 00:01:20,970 One of those options is subtitles. 19 00:01:20,970 --> 00:01:26,237 And actually we're going to choose subtitles only because that has a tendency 20 00:01:26,237 --> 00:01:31,923 to have slightly better compatibility than captions in some specific situations. 21 00:01:31,923 --> 00:01:37,896 So we're going to choose subtitles hover technically these are captions 22 00:01:37,896 --> 00:01:45,230 because subtitles are typically what you use to translate into another language. 23 00:01:45,230 --> 00:01:49,280 These are technically just captions because they're sort of just captioning 24 00:01:49,280 --> 00:01:51,009 what’s happening in the video. 25 00:01:51,009 --> 00:01:55,173 However we're going to choose subtitles for compatibility reasons. 26 00:01:55,173 --> 00:02:02,109 For source language, this is where you want to specify a language. 27 00:02:02,109 --> 00:02:06,619 We're going to say en for English and 28 00:02:06,619 --> 00:02:10,555 then for the source attribute. 29 00:02:10,555 --> 00:02:14,291 We're going to say bridge-captions.vtt, 30 00:02:14,291 --> 00:02:18,440 because that's the file that we just created. 31 00:02:18,440 --> 00:02:21,520 And it's in the same directory as the HTML. 32 00:02:21,520 --> 00:02:24,260 So we don't need to specify a folder. 33 00:02:25,360 --> 00:02:30,810 And then, for the last attribute, we're going to say Default. 34 00:02:30,810 --> 00:02:31,970 Now why are we saying that? 35 00:02:31,970 --> 00:02:35,426 Well we're going to have captions enabled by default, just so 36 00:02:35,426 --> 00:02:36,738 we can easily see them. 37 00:02:36,738 --> 00:02:41,037 You might want to remove this, but this means that this will be the track that's 38 00:02:41,037 --> 00:02:44,170 selected by default, and it will display it by default. 39 00:02:44,170 --> 00:02:49,410 So let's save that out, switch over to our example and 40 00:02:49,410 --> 00:02:54,210 I want you to watch the player controls down here very closely. 41 00:02:54,210 --> 00:02:59,524 We'll refresh the page and as you can see, there's now this little CC button. 42 00:02:59,524 --> 00:03:02,283 That stands for Closed Captioning. 43 00:03:02,283 --> 00:03:05,040 So if we hit play, and we'll mute the audio. 44 00:03:06,260 --> 00:03:10,010 You can see that we now have these subtitles here. 45 00:03:10,010 --> 00:03:14,762 And that's pretty nice if you're not able to watch the video with audio for 46 00:03:14,762 --> 00:03:16,357 some reason or another. 47 00:03:16,357 --> 00:03:18,960 Kinda tells you what's going on. 48 00:03:18,960 --> 00:03:22,953 But if we re-enable captions, or re-enable audio rather, 49 00:03:22,953 --> 00:03:27,580 you can see that it matches up pretty well to what's actually going on. 50 00:03:30,738 --> 00:03:35,422 Like any HTML element there's a lot more you can do with video and 51 00:03:35,422 --> 00:03:38,303 audio, that about covers the basics. 52 00:03:38,303 --> 00:03:42,506 If you'd like to learn more about anything that we've talked about, 53 00:03:42,506 --> 00:03:45,996 be sure to check out the notes associated with each video, 54 00:03:45,996 --> 00:03:49,721 and familiarize yourself with the official documentation.