Create a Caption File7:57 with Nick Pettit
It's always a good idea to caption videos, whether it's for people with hearing impairments, people that are in a public space and don't have headphones with them, or for people that just can't quite understand what you're saying. Even if there's no spoken text in a video, it's still nice to point out sound effects and music, or even highlight the absence of sound.
When creating a WebVTT file, it's a good idea to validate the file. In this video, we use this live WebVTT validator to check our work.
[SOUND] If you've ever watched a foreign film in a language that you don't speak, 0:00 you've probably seen text down at the bottom of the screen. 0:07 That text is called captions or subtitles. 0:12 It's always a good idea to caption videos, whether it's for people with hearing 0:16 impairments, people that are in a public space and don't have headphones with them, 0:20 or for people that just quite can't understand what you're saying. 0:25 Even if there's no spoken text in a video, 0:30 it's still nice to point out sound effects and music. 0:32 Or even highlight the absence of sound. 0:36 Before we can add captions to our video, though, 0:39 we need to actually create those captions in a caption file. 0:42 So there's two different file formats that we could use here. 0:47 We can use what's called an SRT file. 0:50 Or we can use a newer file format that's a little 0:53 bit more web friendly called Web VTT. 0:57 And that's what we're going to use. 1:01 So I'm going to create a new file here in my workspace. 1:03 And we'll call that bridge-captions.vtt. 1:09 So when we create that file, WorkSpaces will automatically open it up for us. 1:16 And WebVTT demands a very specific file format. 1:22 So we wanna make sure that we stick to that. 1:26 And in a moment, we'll actually validate that. 1:29 So let's type WEBVTT in all caps, 1:32 then there's a space, and then FILE in all caps. 1:38 And then we'll hit Enter two times, and 1:43 then we'll type the number 0. 1:47 Then we'll hit Enter again, and then we're going to type out a time code. 1:51 Now, the first sound in the video is a truck engine. 1:56 So we wanna point that out pretty close to the beginning of the video. 2:01 So I'm going to type out 00:00, another :, then 00 again. 2:06 Followed by .500, and 2:13 then a space followed by --, and then a >. 2:17 So we make an arrow kinda pointing to the right there. 2:26 And then we'll do the same thing, so 00:00:00. 2:29 And I actually want this to be at about 5 seconds. 2:34 So we'll change that last 0 to a 5 followed by .000. 2:38 So here what we've done is we've specified the hours, minutes, 2:45 seconds, and milliseconds that a particular caption should be displayed at. 2:51 And this is when that caption should start, so at 0.5 seconds into the video. 2:57 And then this was where that caption should end, 3:03 at exactly five seconds into the video. 3:06 So notice the difference here. 3:09 This is 0.5 seconds, and this is 5 seconds. 3:11 So this will display for about four and a half seconds. 3:15 Then right below that, we can type out our caption. 3:19 And we can type whatever we want right here, that doesn't matter. 3:22 However, in this case, we're pointing out a sound effect. 3:26 And typically when you point out sound effects in captions, 3:29 you want to have them into brackets just like that. 3:33 So we have two square brackets. 3:36 We're going to say [truck engine]. 3:38 And again, WorkSpaces is highlighting this. 3:41 And I know it looks like a very specific way of formatting things. 3:43 But we could, again, actually type whatever we want here, doesn't matter. 3:47 This is just kind of a standard way of pointing out sound effects in captions. 3:52 So that's not the only thing in our video. 3:57 There's a few other things. 4:00 So let's copy this whole block here and paste it just like that. 4:02 So here we have a space followed by a number. 4:08 And instead of 0, we want this to be 1. 4:12 And the next sound are some birds chirping, 4:15 so we'll say [birds chirping]. 4:20 And then we need to change when that happens. 4:25 So we stop at five seconds. 4:27 This sound kinda comes in around six seconds, and it ends around ten seconds. 4:29 And then we can just continue on from there. 4:38 So, next we have a school bus engine. 4:42 And when you're typing out captions, it's important to be somewhat specific and 4:49 not just say engine or vehicle engine. 4:54 If you actually know the type of vehicle or you know the type of bird, for example. 4:57 You could say robin chirping and be a little bit more specific. 5:02 Oops, I actually spelled that wrong, there we go. 5:07 So this school bus engine is at about 13 seconds and ends at about 16 seconds. 5:10 The next sound is some water flowing. 5:19 So we'll say water flowing, change that to a 3, and oops, 5:22 I have an extra space there. 5:26 Gotta be careful. 5:27 We'll say 17 seconds to about 24 seconds and 350 milliseconds. 5:29 And that looks like an oddly specific number because it is. 5:35 That's exactly where we have a camera cut. 5:42 Because, in the next caption, 5:47 we're going to say water flow continues. 5:51 And that's because we have the sound of water flowing. 5:57 And I think a shot or two goes by, and we get to this other shot. 6:01 And it's not necessarily apparent without the sound 6:06 that this sound is actually still running. 6:10 So sometimes it's good to just say, hey, this sound is still going. 6:12 So water flow continues, and that's nice to include at around a camera cut. 6:17 So we'll say 24 seconds and 350 milliseconds. 6:23 So that will come immediately after our previous caption. 6:26 And then we'll say 30 seconds, cuz that's about when the video ends. 6:31 So that should do it for our caption file. 6:38 So now that we've actually created this caption file, 6:41 it's a good idea to validate it. 6:44 So how do we do that? 6:47 Well, if you check the notes associated with this video, 6:49 you should see this WebVTT Validator. 6:52 And this is a site where you can validate your captions in real time. 6:57 And you'll notice that they have a file that's 7:01 pretty similar to the one that we created. 7:04 And it says hey, this is boring, your WebVTT is valid. 7:06 However, if we go in here and kinda mess things up a little bit, 7:11 it will tell us all the things that are wrong with this particular WebVTT file. 7:16 So at line 3, column 22, it looks like that's about right here. 7:22 It says milliseconds must be given in three digits. 7:26 And we say oops, well, we gave our milliseconds in a bunch of numbers and 7:30 letters, so that's not good. 7:34 Let's switch back to our WebVTT file. 7:36 And we'll just copy the whole thing, and we'll paste it into the WebVTT Validator. 7:41 And it says [SOUND], this is boring, your WebVTT is valid. 7:47 So that's good. 7:50 Looks like our caption file is ready to be included in our video. 7:52
You need to sign up for Treehouse in order to download course files.Sign up