Question

我收到错误：Uncaught ReferenceError: $ is not defined at index.html:76。我查看了之前的一些解决方案，建议在<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>中加入<head>。但是当我这样做时，会弹出另一个错误：

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)

以下是我的源代码的完整版本。

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

Answer 1

$错误显然是因为没有加载jQuery库，当你添加jQuery时，错误消失了，因为jQuery现在已加载并正常工作。您收到VideoFrame错误，因为没有定义任何名为VideoFrame的内容，您似乎错过了依赖项。

缺少jQuery时你从未遇到VideoFrame错误的原因是因为$错误意味着脚本在崩溃之前甚至没有达到VideoFrame部分。

<强>更新：缺少的依赖关系似乎是这个：https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js

Answer 2

看起来你已经对jQuery CDN进行了注释，因此它实际上并没有被加载，因此引用错误。取消注释，你应该设置。

Answer 3

将此CDN添加到您的脚本

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

Answer 4

啊哈！

以下是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.错误的解决方案：

更改

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

要

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

有关详细说明，请参阅此处：Link and execute external JavaScript file hosted on GitHub

未捕获的ReferenceError：未定义jQuery;当脚本包含另一个错误

4 个答案: