Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by AUTIF KAMAL
AUTIF KAMAL
11,692 Points

Why won't my captions show for my HTML5 video?

I believe I'm setting up my video correctly, but the captions won't show. Please help me figure out how to get the captions show up on my video.

Below, I've pasted my code. First is the index.html and second is the captions.vtt file. I didn't know how to paste the code as a separate screenshot. Sorry.

index.html 
<!DOCTYPE html>

    <html>
        <body>
            <head>
                <link rel="stylesheet" type="text/css" href="styles.css">
            </head>
            <div class="video">
            <h1>Connecting Your Devices to WIFI</h1>
            <video width="500" height="400" controls>
              <source src="video.mp4" type="video/mp4">
              <track label="English" kind="subtitles" srclang="en" src="captions.vtt" default>
            </video>
            </div>
        </body>

    </html>
captions.vtt 
1
00:00:00,240 --> 00:00:04,130
Now that we've looked at the architecture
of the internet, let's see how you might

2
00:00:04,130 --> 00:00:07,535
connect your personal devices to
the internet inside your house.

3
00:00:07,535 --> 00:00:11,270
Well there are many ways to
connect to the internet, and

4
00:00:11,270 --> 00:00:13,960
most often people connect wirelessly.

5
00:00:13,960 --> 00:00:17,940
Let's look at an example of how
you can connect to the internet.

6
00:00:17,940 --> 00:00:22,370
If you live in a city or a town,
you probably have a coaxial cable for

7
00:00:22,370 --> 00:00:26,880
cable Internet, or a phone line if you
have DSL, running to the outside of

8
00:00:26,880 --> 00:00:30,920
your house, that connects you to
the Internet Service Provider, or ISP.

9
00:00:32,100 --> 00:00:34,730
If you live far out in the country,
you'll more likely have

10
00:00:34,730 --> 00:00:39,430
a dish outside your house, connecting
you wirelessly to your closest ISP, or

11
00:00:39,430 --> 00:00:41,190
you might also use the telephone system.

12
00:00:42,350 --> 00:00:46,300
Whether a wire comes straight from
the ISP hookup outside your house, or

13
00:00:46,300 --> 00:00:49,270
it travels over radio
waves from your roof,

14
00:00:49,270 --> 00:00:53,760
the first stop a wire will make once
inside your house, is at your modem.

15
00:00:53,760 --> 00:00:57,780
A modem is what connects the internet
to your network at home.

16
00:00:57,780 --> 00:01:00,150
A few common residential modems are DSL or
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

I've cleaned up your included code a bit. Be sure to check out the Markdown Cheatsheet below the editor for more help!

1 Answer

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Your video code looks pretty good to me. I'd recommend double checking src locations there just in case.

As far as the .vtt goes, I've never seen one use commas in the time stamp. Try changing your format from 00:00:46,300 to 00:00:46.300 and see if that works.

AUTIF KAMAL
AUTIF KAMAL
11,692 Points

Thanks