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 HTML Video and Audio Captioning Video The Track Element

Posted by Nick Evershed
Nick Evershed
6,429 Points

Captions not working

WEBVTT FILE

0 00:00:00.500 --> 00:00:05.000 [truck engine sounds]

1 00:00:06.000 --> 00:00:10.000 [birds chirping]

2 00:00:13.000 --> 00:00:16.000 [school bus engine sounds]

3 00:00:17.000 --> 00:00:24.350 [water flowing]

4 00:00:17.000 --> 00:00:30.000 [water flow continues]

video src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4" controls></video> <track label"English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>

im using chrome too

Jason Stroup
Jason Stroup
1,894 Points
Jason Stroup
Jason Stroup
1,894 Points

Hi Nick - I hope you've solved the issue by now... If not, chrome has updated since they've shot this video...Just make sure to click on the settings in the video (3 dots on the lower right hand corner) and make sure captions or subtitles are on and you're good to go!

(ps - just used their workspace - did not host with MAMP as suggested in previous videos).

2 Answers

Christine Hendrickson
seal-mask
.a{fill-rule:evenodd;}techdegree
Christine Hendrickson
Front End Web Development Techdegree Student 5,422 Points
Christine Hendrickson
.a{fill-rule:evenodd;}techdegree
Christine Hendrickson
Front End Web Development Techdegree Student 5,422 Points

Hey Nick,

I was running into the same issue and I found your post.

First I noticed that there was a little bit missing from the code you provided. Where you have track label"English" it should be label="English". It looks like you're just missing the =.

Second, I just read through the other comments. I looks like this won't work with Chrome locally. Try opening this in another browser, or upload the files to a web server. You can take a look at the other discussions here, as there seem to be quite a few people (including myself) running into this issue.

I hope this helps!

Happy coding ☺

Mihael Hunjet
Mihael Hunjet
3,397 Points
Mihael Hunjet
Mihael Hunjet
3,397 Points

<video controls> <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4"> <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg"> <track label="English track" kind="subtitles" srclang="en" src="bridge-captions.vtt" default> </video>