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

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Posted by Saqib Ishfaq
Saqib Ishfaq
13,912 Points

i followed exactly what nick said in my VScode editor but i am getting this error in chrome but on firefox it works fine

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.

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

This is a web security feature by Chrome. By default they have a "Same Origin" policy, meaning the files need to be in the same resource.

More info here. https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

I'm running the project on a localhost web server, so I'm not running into that issue. To create your own local webserver via Apache, I recommend MAMP. (I too am working on Treehouse projects via VS-Code editor.

https://www.mamp.info/en/

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

Xayaseth Boudsady yeah i already installed MAMP and its running fine, but still not working:/

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

Can you provide a snippet of your code block?

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

There was a discussion thread asked in 2014. Perhaps you may find your answer here.

https://teamtreehouse.com/community/after-adding-the-track-in-my-html-file-i-got-a-crossorigin-attribute-error-when-running-the-web-page

But it may appear that you are not serving the page through a webserver.

Here was an answer from a previous poster.

"I followed a simple trick to overcome this situation. I saved all the files in htdocs folder of XAMPP and opened it in the browser as an XAMPP document, and subtitles appeared in the video."

I'm using a Mac, so the default file path is Applications/MAMP/htdocs (put all your project file here) You can then view your folder in the browser with the following link.

localhost:8888/

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

Xayaseth Boudsady 

<!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 rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.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">
      </audio>

    </div>

  </body>
</html>
Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

and i tried copying all the files in htdocs folder of MAMP and opened the html file from there into the chrome browser but still no difference..... chrome was my favorite browser untill now lol but firefox just awesome for this particular <track> element

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

Saqib, You are correct put your files in the right directory. However, you need to load the page via the localhost.

This link below is in my browser the shows "localhost" as the page is being serve via a web server. http://localhost:8888/treehouse/treehouse-html-video-audio/html-video-audio/project-1/

The link below signifies that it is opened "locally" from my hardrive.

file:///Applications/MAMP/htdocs/treehouse/treehouse-html-video-audio/html-video-audio/project-1/index.html

This is very two different path, so you need to go into your chrome browser and type in... *http://localhost:8888 *

From there you should load your project file, if it has an index.html for it.

I know its confusing, but this should work.

Also, your code snipent is correct. You just need to load the index.html through the localhost:8888

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

(so this link below being run from htdocs folder of MAMP) file:///C:/MAMP/htdocs/simple-video.html (and this from my work directory file) file:///C:/Users/User/Desktop/unit%206/create-a-caption-file/simple-video.html

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

this is what i am trying in browser (http://localhost:8888/MAMP/htdocs/simple-video.html) (http://localhost:8888/Users/User/Desktop/unit%206/create-a-caption-file/simple-video.html) No Luck:/ for both paths it says "requested URL not found on this server"

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

Your link file

file:///C:/MAMP/htdocs/simple-video.html I would rename the "simple-video.html to index.html so that the webserver will read it.

Also, I would create a project sub-folder in your htdocs folder.
For example file:///C:/MAMP/htdocs/simple-video/index.html

Then in your browser type: localhost:8888/simple-video/ Your page should load your index.html

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

Oh, most importantly. Make sure your webserver is running.

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

Xayaseth Boudsady yayyyy it works, for the files in htdocs folder after renaming it to index and putting it in a /subfolder...................... you are a gem, trust me just wana give you a hug right now lol ;D Thanks a million

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

i can'see best answer option on your answers:/ also would you mind if i ask you is there any way you are from london lol ?

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

Sure no problem, glad to help. It's those little things that often takes hours to figure out, but it's a very simple issue to fix.

Webserver tend to point to index.html as the default page, but you can override these.

Happy coding!

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

No, not from London. Although someday I would like to live/work there.

Currently coding in San Francisco, California.

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

i wish u was we could meetup may be lol , you were brilliant :) happy coding and a happy new year

1 Answer

Mohammed Ali
Mohammed Ali
11,134 Points
Mohammed Ali
Mohammed Ali
11,134 Points

I has same issue too, it's chrome policy change, works fine on Firefox. However if anyone should run into same issue the best way is to set up simple HTTP Server. If you are using Unix system then running this line in the root folder of your project should fix it:

python2 -m SimpleHTTPServer 80
OR
python3 -m http.server 80

80 is port number, you can use any port you prefer it doesn't have to be 80 only. If you are on Linux you might have to add sudo infront of it.. sudo python3 -m http.server 80 or sudo python2 -m SimpleHTTPServer 80. hope you find it useful.