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>

Add VideoFrame cdn also

Durga
– Durga

2017-07-10 15:09:18 +00:00
Commented Jul 10, 2017 at 15:09 — Durga
– Durga, Commented Jul 10, 2017 at 15:09
@Durga how do I do so?

Alex Ker
– Alex Ker

2017-07-10 15:13:35 +00:00
Commented Jul 10, 2017 at 15:13 — Alex Ker
– Alex Ker, Commented Jul 10, 2017 at 15:13
add a jQuery.js first.

Rence
– Rence

2017-07-10 15:15:47 +00:00
Commented Jul 10, 2017 at 15:15 — Rence
– Rence, Commented Jul 10, 2017 at 15:15

Lennholm · Accepted Answer · 2017-07-10 15:20:24Z

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, 2017 at 15:20

answered Jul 10, 2017 at 15:14

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Alex Ker Over a year ago

Ahh I understand. I'm using the code from jsfiddle.net/Ck6Zq/184. It does seem to work in Fiddle. How would I include VideoFrame? Is that part of a Javascript Library?

Lennholm Over a year ago

@AlexKer If you look at the external libraries in the fiddle, you'll see it includes this library: rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js

Alex Ker Over a year ago

Yep I included that as well as JQuery Library first. I'm getting Refused to execute script from 'raw.githubusercontent.com/allensarkisyan/VideoFrame/master/…' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. Please see updated code above

Lennholm Over a year ago

@AlexKer Try to add type="text/javascript" as an attribute on the script tag

Alex Ker Over a year ago

which script tag, I have two in head and one in body. Edit: I tried all three script tags, doesn't solve the error.

|

user1936007 · Accepted Answer · 2017-07-10 15:09:29Z

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, 2017 at 15:09

user1936007

2 Comments

Alex Ker Over a year ago

But the point is that when I uncomment it, I get the second error.

user1936007 Over a year ago

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.

Our_Benefactors · Accepted Answer · 2017-07-10 15:16:37Z

0

Add this CDN to your scripts

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

answered Jul 10, 2017 at 15:16

Our_Benefactors

3,6273 gold badges25 silver badges30 bronze badges

1 Comment

Alex Ker Over a year ago

I get another error for including this. Please see updated code and error above.

Alex Ker · Accepted Answer · 2017-07-10 15:37:55Z

0

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

answered Jul 10, 2017 at 15:37

Alex Ker

552 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

9 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related