All language subtitles for 28 - Captions and subtitles.en

- It's pretty amazing that we can put

audio and video on a website.

But not everyone can always hear

or understand the audio.

Some people are completely deaf.

Other people can hear sometimes

certain things and certain conditions

but not all the time.

And for people who can hear,

well they can't always listen.

Sometimes people would listen to a video,

but they're some place where they

can't use speakers

and they don't have headphones.

Or they are listening,

but they can't really understand

the people who are talking

because of an unfamiliar accent,

or maybe the person who is talking

is talking way too fast.

There's a good chance that you're experiencing

any of theses conditions right now.

And you're using the captions for this video.

On the web we have the power that we need

to provide content in multiple ways simultaneously.

So let's add captions and make our video

more accessible to everyone.

To do this we'll use the track element

and point to a text file.

The video player will provide

all the functionality

so a viewer can turn captioning on and off

or switch from one set of subtitles to another.

There are many file formats for captions.

But on the web, we want to use webvtt,

web video text tracks.

It's basically a plain text file

with a vtt extension

that uses a certain convention

for providing the information.

You can see here each line of text

with the time code information

that tells the video player when

to show each line.

To get these captions to show up on our video

we put a track element inside the video element.

Just like the sources element, it's part

of the list of options for the browser to use

while rendering the video player.

On the track element,

we'll use the source attribute

to point to the file itself.

We'll use the kind attribute

to tell the browser that this is captions.

We'll add a label of english

that will show up in the player

as a label for this choice.

We'll use a source lang attribute

to specify which language this is.

And we'll put a default attribute

on this track element

to specify that this track

is the one we want to use by default

when a user turns on captions.

We can see now that a little captioning icon has appeared.

And when we click on it,

we have options for off, auto, and English.

The word English shows up

because that's what I put in my label.

Now I'll add a translation into Spanish

and offer some options for subtitles.

I've got another vtt file

this time in Spanish.

And we'll add another track element

inside this same video element.

This time we'll set kind to subtitles,

set source lang to es for espagnole,

and create a label of espagnole.

Now we can see that there's a second choice

in the list of subtitles.

And we have Spanish subtitles.

There are a few other options for the kind attribute.

We could create a vtt file that has

descriptive information about

what's happening visually in the video,

and use kind=descriptions.

This gives people the option of playing

a track that reads aloud descriptions

of what you miss if you aren't

looking at the video.

For instance, the astronaut jumps off the ladder

and bounces a bit as he hits the ground.

This makes a video more accessible to

the blind and the visually impaired.

Kind=chapters gives us a way to provide

a text file that lists the chapters in the video,

giving users a way to jump from one section

in the video to another.

As I'll talk about in the next video,

you might use YouTube, Vimeo, or

another video hosting service instead

of using the video element in html.

All of those platforms have a way

to upload caption files

and provide the same kind of functionality.

Captions and subtitles are powerful.

And in many places they're actually required by law.

By providing them, you'll make it far easier

for more people to find, watch, or listen

to your content.

Add captions and your traffic will go up.