Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Video and Audio (Retired) Captioning Video The Track Element

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.

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.

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

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.

Way to go Travis

@ 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>

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

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