Uncaught ReferenceError: jQuery is not defined; When script included another error

Question

I am getting the error: Uncaught ReferenceError: $ is not defined at index.html:76. I looked at some previous solutions which suggested including <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> in <head> . But when I do so, another error pops up:

Refused to execute script from 'https://raw.githubusercontent.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

index.html:78 Uncaught ReferenceError: VideoFrame is not defined
    at HTMLDocument.<anonymous> (index.html:78)
    at j (jquery-1.11.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
    at Function.ready (jquery-1.11.0.min.js:2)
    at HTMLDocument.K (jquery-1.11.0.min.js:2)

Here is a complete version of my source code.

<!DOCTYPE html>
<html>
  <head>
<!--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
    <title>Video Test</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src='https://raw.githubusercontent.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js'></script>
    <style>
      #container {
        position: relative;
      }
      #overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 10;

      }
      #base {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      #radio1 {
        position: absolute;
        top: 383px;
        left: 462.5px;
      }
      #radio2 {
        position: absolute;
        top: 401px;
        left: 466px;
      }
      #radio3 {
        position: absolute;
        top: 422.5px;
        left: 468px;
      }
      #radio4 {
        position: absolute;
        top: 443px;
        left: 467px;
      }
    </style>
  </head>
  <body>
    <div class="frame">  
      <span id="currentFrame">0</span>
    </div>
    <div id="controls">
      <button id="play-pause">Play</button>
    </div>
    <div id="container">
      <div id="overlay">
        <form action="">
          <input type="radio" name="white" value="1" id="radio1"/>
          <input type="radio" name="white" value="2" id="radio2"/>
          <input type="radio" name="white" value="3" id="radio3"/>
          <input type="radio" name="white" value="4" id="radio4"/>
          <input type="button" id="continue" value="Continue"/>
        </form>
      </div>
      <div id="base">
        <video width="960px" height="540px" id="video">
          <source src="videos/event_0_Junli_Standing_20150322_181647_00_0.6.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        var currentFrame = $('#currentFrame');
        var video = VideoFrame({
            id : 'video',
            frameRate: 5,
            callback : function(frame) {
            currentFrame.html(frame);
            }
        });

        $('#play-pause').click(function(){
            if(video.video.paused){
                video.video.play();
                video.listen('frame');
                $(this).html('Pause');
            }else{
                video.video.pause();
                video.stopListen();
                $(this).html('Play');
            }
        });
      });


      //////
      var arr = []
      document.getElementById("continue").addEventListener("click", function() {
          var radios = document.querySelectorAll('input:checked')          
          if (radios.length > 0) {
            arr.push(radios[0].value)
          }
          console.log(arr)
      }) 

    </script>
  </body>
</html>

Lennholm · Accepted Answer · 2017-07-10T15:20:24.757

2

The $ error is obviously because the jQuery library isn't loaded, when you add jQuery, the error goes away because jQuery is now loaded and working. You get the VideoFrame error because there's nothing called VideoFrame defined, it seems like you're missing a dependency.

The reason you never got the VideoFrame error when jQuery was missing is because the $ error meant the script never even got as far as the VideoFrame part before it crashed.

Update: The missing dependency appears to be this one: https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js

edited Jul 10 '17 at 15:20

answered Jul 10 '17 at 15:14

Lennholm

7,205
1
21
30

Ahh I understand. I'm using the code from http://jsfiddle.net/Ck6Zq/184/. It does seem to work in Fiddle. How would I include VideoFrame? Is that part of a Javascript Library? – Alex Ker Jul 10 '17 at 15:16
@AlexKer If you look at the external libraries in the fiddle, you'll see it includes this library: https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js – Lennholm Jul 10 '17 at 15:18
Yep I included that as well as JQuery Library first. I'm getting Refused to execute script from 'https://raw.githubusercontent.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. Please see updated code above – Alex Ker Jul 10 '17 at 15:21
@AlexKer Try to add `type="text/javascript"` as an attribute on the script tag – Lennholm Jul 10 '17 at 15:24
which script tag, I have two in head and one in body. Edit: I tried all three script tags, doesn't solve the error. – Alex Ker Jul 10 '17 at 15:26
@AlexKer Preferably all of them! But most importantly the one that loads the VideoFrame library – Lennholm Jul 10 '17 at 15:28
Yeah I tried that. The error stems from line 1, is it because of my type of HTML? – Alex Ker Jul 10 '17 at 15:30
@AlexKer When an error occurs on "line 1", that's usually just misleading. I think this may be an issue with HTTPS. You see, the library is loaded over HTTPS but you probably host your page on HTTP. I suggest you either find an HTTP CDN hosting this library, or just download the script and place it together with your other files – Lennholm Jul 10 '17 at 15:35
Solved it. See my post. Thank you so much for the help! – Alex Ker Jul 10 '17 at 15:38

score 0 · Answer 2 · answered Jul 10 '17 at 15:09

0

It looks like you've got the call to the jQuery CDN commented out so it's not actually being loaded, hence the reference error. Uncomment it and you should be set.

answered Jul 10 '17 at 15:09

But the point is that when I uncomment it, I get the second error. – Alex Ker Jul 10 '17 at 15:14
Yeah, I kind of skimmed and missed that part. Like Mikael Lennholm said, `VideoFrame` is not defined. I'd put money on Our_Benefactor's suggestion of including the script. – Jul 10 '17 at 15:19

score 0 · Answer 3 · answered Jul 10 '17 at 15:16

0

Add this CDN to your scripts

<script src='https://raw.githubusercontent.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js'>

answered Jul 10 '17 at 15:16

Our_Benefactors

3,220
3
21
27

I get another error for including this. Please see updated code and error above. – Alex Ker Jul 10 '17 at 15:24

score 0 · Answer 4 · answered Jul 10 '17 at 15:37

Aha!

Here is the solution for the Refused to execute script from 'https://raw.githubusercontent.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. error:

Changing

<script type = "text/javascript" src='https://raw.githubusercontent.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js'>

To

<script type="text/javascript" src='https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js'></script>

See here for detailed explanation: Link and execute external JavaScript file hosted on GitHub

Uncaught ReferenceError: jQuery is not defined; When script included another error

4 Answers4