MediaElement doesn't work: two errors in JavaScript console

Question

Hello there!

I have troubles with this lesson and it drives me crazy...

First of all, I'm not working on the Workspaces. I'm using sublime text editor for all of the lessons and I'm pretty sure that my problem is connected with security and Google Chrome blocking some of the scripts ....

Here is my code:

<!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'>

    <script type="text/javascript" src="mejs/jquery.js"></script>
    <script type="text/javascript" src="mejs/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" src="mejs/mediaelementplayer.min.css" />

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="mejs/mejs-skins.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>
    <script>
      $("audio, video").mediaelementplayer({
        success: function(player, node) {
          $("#" + node.id + "-mode").html("mode: " + player.pluginType);
        },
        startLanguage: "en",
        translationSelector: true
      });
    </script>   
  </body>
</html>

But the main problem can be found in JS console. I can see two bugs there:

1:

jquery.js:8526 XMLHttpRequest cannot load file:///C:/Users/Cezary/Desktop/Video%20Element/Part%2003/bridge-captions.vtt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

2:

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.

I would really appreciate some help! :)

Answer 1 · 2017-01-25T23:23:00Z

January 25, 2017 11:23pm

Hi! This is due to Chrome's CORS policy. Sometimes, when you want to load files from your disk, Chrome (and some other browsers) gets paranoid and thinks your files are coming from different sources. This is usually a red flag. It could mean someone is trying to trick you (CSRF), so access is blocked.

There are a few ways around this:

Use Safari or Firefox instead of Chrome.
Set up a local server.
Tweak Chrome to disable the CORS (not recommended).
Use an editor that uses a built-in local server (such as workspaces).

The best option is to set up a local server. It's easy. Here's a video on how to do it: https://www.youtube.com/watch?v=UCHzlUiDD10&t=0s

This security measure looks like a pain, but it's actually very interesting. Check out this video explaining the risk: https://www.youtube.com/watch?v=vRBihr41JTo

Welcome to the Treehouse Community

Looking to learn something new?

Cezary Burzykowski

Cezary Burzykowski

MediaElement doesn't work: two errors in JavaScript console

1 Answer

Alonso Serrano

Alonso Serrano