admin管理员组文章数量:1429487
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=".11.0.min.js"></script> in <head> . But when I do so, another error pops up:
Refused to execute script from '.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 plete 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=".11.0.min.js"></script>
<script src='.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>
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./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./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 plete 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./jquery-1.11.0.min.js"></script>
<script src='https://raw.githubusercontent./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 Commented Jul 10, 2017 at 15:09
- @Durga how do I do so? – Alex Ker Commented Jul 10, 2017 at 15:13
- add a jQuery.js first. – Rence Commented Jul 10, 2017 at 15:15
4 Answers
Reset to default 2The $ 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./allensarkisyan/VideoFrame/master/VideoFrame.min.js
It looks like you've got the call to the jQuery CDN mented out so it's not actually being loaded, hence the reference error. Unment it and you should be set.
Add this CDN to your scripts
<script src='https://raw.githubusercontent./allensarkisyan/VideoFrame/master/VideoFrame.min.js'>
Aha!
Here is the solution for the Refused to execute script from 'https://raw.githubusercontent./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./allensarkisyan/VideoFrame/master/VideoFrame.min.js'>
To
<script type="text/javascript" src='https://rawgit./allensarkisyan/VideoFrame/master/VideoFrame.min.js'></script>
See here for detailed explanation: Link and execute external JavaScript file hosted on GitHub
版权声明：本文标题：javascript - Uncaught ReferenceError: jQuery is not defined; When script included another error - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745452676a2658958.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论