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 (Retired) Captioning Video The Track Element

Posted by Jose M Aboytes
Jose M Aboytes
2,775 Points

Why aren't the cc appearing in my controls?

This is my code:

<body>

<h1>HTML Audio & Video</h1>


<div class="wrapper">
  <h2>Video Example</h2>
    <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" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
    </video>

please help me find the error. I'm using Firefox as my browser.

john larson
john larson
16,594 Points

Your question caught my eye. I don't know right off so I went back to the video. The first thing I notice is I don't see a WEBVTT FILE. Maybe you have one and just didn't post it. But that might be a place to start.

Jose M Aboytes
Jose M Aboytes
2,775 Points

I also noticed that, when I used Internet explorer Edge, I was able to see the "cc" in the control bar. At the time I was using Firefox. I was able to see the subtitles, but the "cc" did not show up in the controls bar. So I tried it with Google Chrome and the same thing happened, no "cc" in the control bar.

2 Answers

Travis Sweeney
Travis Sweeney
10,973 Points
Travis Sweeney
Travis Sweeney
10,973 Points

Here's what worked for me, as I was having the same issue. I changed the src attribute in the track element to "../bridge-captions.vtt". Why this works is beyond me, since the html and vtt files should be in the same directory. Maybe it's a weird bug with workspace, but I decided to give it a shot and now I see captions.

john larson
john larson
16,594 Points

Way to go Travis

Jose M Aboytes
Jose M Aboytes
2,775 Points
Jose M Aboytes
Jose M Aboytes
2,775 Points

@ John Larson, here is my code :D

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> HTML Audio & Video</title>

<link rel="stylesheet" href="css/normalize.css"> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Nunito:400,300' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body>

<h1>HTML Audio & Video</h1>


<div class="wrapper">
  <h2>Video Example</h2>
    <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" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
    </video>
  <h2>Audio Example</h2>
    <audio controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
    </audio>



</div>

</body> </html>

</html>

john larson
john larson
16,594 Points

To be clear, are you saying your captions are not working? or that cc is not showing up in the controls window? or both?

john larson
john larson
16,594 Points

would you mind posting your bridge-captions.vtt file so I can link to it? I'll try trouble shooting with that in place. Thanks