Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Create a Caption File

7: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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

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.

Live WebVTT Validator

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

[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

You need to sign up for Treehouse in order to set up Workspace

Sign up