Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up