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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745452677a4628342.html
评论列表（0条）