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

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

The subtitles(captions) do not appear

Can you guys have a look at the code. I don't know how to make it work. I am using Chrome and the subtitles/captions do not display.

   <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="Captions" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
      </video>

      <h2>Audio Example</h2>
Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

WEBVTT FILE

0 00:00:00.500 - - > 00:00:05.00 h : min:sec. [noise in the beginning shall be typed in [] ]

1 00:00:06.000 - - > 00:00:10.00 h : min:sec. [birds chirping ]

2 00:00:13.000 - - > 00:00:16.00 h : min:sec. [birds chirping ]

3 00:00:17.000 - - > 00:00:24.350 h : min:sec. [water flowing ]

4 00:00:24.350 - - > 00:00:30.00 h : min:sec. [water continues to flow]

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Even when I download the files for the project the captions still don`t work out

4 Answers

Alan Jenkins
Alan Jenkins
10,878 Points
Alan Jenkins
Alan Jenkins
10,878 Points

In the video, when he has you validate the vtt file on the Live WebVTT Validator there is one slight difference and I caught this in the video.

I too run chrome and had the same problem. Here's what helped me.

He tells you to type "WEBVTT FILE" but when you look at the screen while he is on the validator site it shows only WEBVTT on that first line

The validator notes this error.

When I removed the word "FILE" from my code. Not only did the error go away in the validator, but the captions started working.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

This is because the HTML page and your browser is trying to access the webvtt file from another origin or server from the video.

You might need to actually download the video and audio files to the same place as the webvtt file, then use a relative URL to all of them.

Or just run it from Workspaces.

If you're still getting errors, can you open the Chrome Console (Ctrl + Shift +J on Windows, Cmd + Option + J on Mac) and reload the page, then copy and paste any errors you see there?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

I tried to download everything in the same folder. The vtt , audio and video file. This is the code in Notepad:

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

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

  </head>
  <body>

    <h1>HTML Video and Audio</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">
        <track label="English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
      </audio>

    </div>

  </body>
</html>

The error I am getting in Developer is: Text track from origin 'file://' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Your src attributes on the video and audio source elements are still pointing to the external video files.

You can also set the crossorigin attribute on both the video and audio elements, like so:

<video controls crossorigin="anonymous">
...

<audio controls crossorigin="anonymous">

All that being said, I had issues running this on my local machine when just opening the files. It's going to be much easier to just run this all in Workspaces.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Unfortunately it doesn't work because it is too big for workspace, but I will try it with other videos

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

It should work without uploading the videos and just using the src URLs that are already there.

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

What worked for me was adding "../" to the beginning of the src attribute in the track element. So my code ended up with

<track label="English" kind="subtitles" srclang="en" src="../bridge-captions.vtt" default>

I think because the video files we're using are in a different folder, we need to navigate back to access the vtt file. Hopefully this helps someone!