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

JavaScript Setting Options for the Media Player

I'm trying to include captions as one of my features, but my browser won't load the .vtt file.

Here's the error I'm getting:

XMLHttpRequest cannot load file:///Users/Rick/Documents/Treehouse/Media_Element_JS/bridge-captions.vtt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Also:

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.

Index.html and bridge-captions.vtt are in the same file.

What's causing this?

1 Answer

Chrome does not allow access to file:// for some extensions like json and I guess .vtt. These are security measures. What you can do is create a local http server to run these files.

This looks like it might be a good read: https://chrisbitting.com/2014/06/16/local-web-server-for-testing-development-using-node-js-and-http-server/

Thanks Nick!

nico dev
nico dev
20,364 Points

Man, I am seriously thankful for this answer.

Few times have I been so lost as before I read it, and it really helped me get back on track.

Just in case it helps newbies like me, this blog from Treehouse will help with installing Node.js (needed to run the 'http-server' stuff).

Again, thank you very much, Nick Trabue!