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
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.
HTML Elements
- <track> - The track element specifies timed text data for video and audio media.
Resources
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up