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 trialSaqib Ishfaq
13,912 Pointsi 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.
Saqib Ishfaq
13,912 PointsXayaseth Boudsady yeah i already installed MAMP and its running fine, but still not working:/
Xayaseth Boudsady
21,951 PointsCan you provide a snippet of your code block?
Xayaseth Boudsady
21,951 PointsThere was a discussion thread asked in 2014. Perhaps you may find your answer here.
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
13,912 Points<!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
13,912 Pointsand 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
21,951 PointsSaqib, 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
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
13,912 Pointsthis 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
21,951 PointsYour 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
21,951 PointsOh, most importantly. Make sure your webserver is running.
Saqib Ishfaq
13,912 PointsXayaseth 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
13,912 Pointsi 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
21,951 PointsSure 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
21,951 PointsNo, not from London. Although someday I would like to live/work there.
Currently coding in San Francisco, California.
Saqib Ishfaq
13,912 Pointsi wish u was we could meetup may be lol , you were brilliant :) happy coding and a happy new year
1 Answer
Mohammed Ali
11,134 PointsI 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.
Xayaseth Boudsady
21,951 PointsXayaseth Boudsady
21,951 PointsThis 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/