This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
I am trying to get video frame count as the code here
I have downloaded videoFrame.js from here and located in my website directory.
But while clicking on play the video not playing also getting error like,
ReferenceError: $ is not defined in the line var currentFrame = $('#currentFrame');
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="frame">
<span id="currentFrame">0</span>
</div>
<video height="180" width="100%" id="video">
<source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>
<div id="controls">
<button id="play-pause">Play</button>
</div>
<script>
var currentFrame = $('#currentFrame');
var video = VideoFrame({
id : 'video',
frameRate: 29.97,
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');
}
});
</script>
</body>
</html>
You need to include jQuery add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
to the html head.
You need to include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Try adding a call to jquery library
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I have this page:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="miscript.js"></script>
</head>
<body>
<div align="center">
<video id="myvideo" autoplay>
<source src="008.mp4" type="video/mp4">
Your browser does not support html5 videos
</video>
</div>
</body>
</html>
I want to see the video and when it finish i want to redirect to other page.
I´m trying with this but doesnt work.
miscript.js
document.getElementById('myvideo').addEventListener('ended',myHandler, false);
function myHandler(e) {
window.location="NewFile1.html";
};
Any idea??
jQuery:
$("#myvideo").bind("ended", function() {
//code to run when video ended
//redirect to http://stackoverflow.com
window.location.replace("http://stackoverflow.com");
});
Without jQuery:
var videoObj = document.getElementById('myvideo');
videoObj.onended = function(e) {
//code to run when video ended
//redirect to http://stackoverflow.com
window.location.replace("http://stackoverflow.com");
};
By adding event listener using anonymous function:
document.getElementById('myvideo').addEventListener('ended', function(e) {
//code to run when video ended
//redirect to http://stackoverflow.com
window.location.replace("http://stackoverflow.com");
})
Page redirect:
window.location.replace("http://stackoverflow.com");
or
window.location.href="http://stackoverflow.com";
Note: Try to run this code after DOM is loaded.
$(document).ready(function() { //Run from here });
var vid = document.getElementById("myvideo");
vid.onended = function() {
window.location.href="http://test.html/";
};
<div align="center">
<video id="myvideo" autoplay>
<source src="008.mp4" type="video/mp4">
Your browser does not support html5 videos
</video>
Try with no need apply false
document.getElementById('myvideo').addEventListener('ended',myHandler);
function myHandler(e) {
window.location="NewFile1.html";
};
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
Why am I getting a console error "Uncaught TypeError: Cannot set property 'ondragover' of null"
<html>
<head>
<title></title>
<script>
var dragzone = document.getElementById('DragZone');
dragzone.ondragover=function() {
console.log("Bang");
return false;
};
</script>
</head>
<body>
<div id="DragZone">Drag a file over here</div>
</body>
</html>
You are trying to access the DOM element before it was created. Move the script to the bottom of <body> and it will work.
<html>
<head>
<title></title>
</head>
<body>
<div id="DragZone">Drag a file over here</div>
<script>
var dragzone = document.getElementById('DragZone');
dragzone.ondragover=function() {
console.log("Bang");
return false;
};
</script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
I am new to javascript programming.
When i try to run this code, the default image in html tags shows up.
I used the setAttribute function but it doesn't work. Please Help!
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
</script>
</head>
<body>
<img src="awesomesite.gif" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
</body>
</html>
either move the script to the bottom of your page or add the following to your script
document.onload(function()
{
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<img src="http://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
<script>
window.onload = function () {
var logo = document.getElementById('image');
logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
};
</script>
</body>
</html>
I am trying to make a video player using html and .js, however the attach1.js file cannot be called by html. Following is my html file:
<!Doctype html>
<html lang='en'>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="attach1.css">
<script type="text/javascript" src="attach1.js"> </script>
</head>
<body>
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="bnm.mp4">
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton"> Play
</button>
</div>
<div id="defaultBar">
<div id="progressBar"> </div>
</div>
<div style="clear:both"> </div>
</nav>
</section>
</body>
</html>
Following is my attach1.js:
document.write('Hi');
function doFirst()
{
barSize=600;
myMovie1=document.getElementbyId('myMovie');
playButton1=document.getElementbyId('playButton');
bar=document.getELementbyId('defaultBar');
progressBar1=document.getElementById('progressBar');
document.write('Hi');
playButton1.addEventListener('click', playorpause, false);
bar.addEventListener('click', clicker, false);
}
function playorpause()
{
if(!myMovie1.paused && !myMovie1.ended)
{
myMovie1.pause();
playButton1.innerHTML='Play';
window.clearInterval(updateBar);
}
else
{
myMovie1.play();
playButton1.innerHTML='Pause';
updateBar=setInterval(update, 500);
}
}
function update()
{
if(!myMovie1.ended)
{
var size=parseInt(myMovie1.currentTime*barSize/myMovie1.duration);
progressBar1.style.width=size+'px';
}
else
{
progressBar1.style.width='0px';
playButton1.innerHTML='Play';
window.clearInteval(updateBar);
}
}
function clicker(e);
{
if(!myMovie1.paused && !myMovie1.ended)
{
var mouseX=e.pageX-bar.offsetLeft;
var newtime=mouseX*myMovie1.duration/barSize;
myMovie1.currentTime=newtime;
progressBar1.style.width=mouseX+'px';
}
}
window.addEventListener('load', doFirst, false);
The attach1.js would not even print 'Hi' (in the first line of .js file). This would imply that the file is not being called by the .html file. However, I cannot figure out a reason for this.
Any help is appreciated. Thanks.
you've got:
function clicker(e);
{
//code
}
rather than
function clicker(e)
{
//code
}
I'm also getting a file not found error for attach1.css, but that's because I don't have your .css file
edit
You're calling document.getElementbyId vs document.getElementById
You really ought to check out the developer tools. they're your friend.
You have to call the functions in attach1.js by either putting another tag in your html, or by calling it using a button, like this:
<button type='button' onclick="play function()">Play</button>
Just replace "play function" with the name of the function that you have to play stuff.
you have an error in your code, remove the semi-column from this line
function clicker(e);
It would be a good idea to look at the errors in the js console
I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!
<!-- Video -->
<div style="height:980px;height:540px;">
<div style="z-index:100;position:absolute;">
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
<source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</div>
<div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video -->
<!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
var videoEl = $('#myVideo');
playPauseBtn = $('#imgPoster');
playPauseBtn.bind('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
});
videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->
There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.
Anyway, example below:
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
</script>
EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/
Had a quick look at your site, and the video is cool :-)
If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower.
Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway.
The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.
Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
});
</script>
</head>
<body>
<video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</body>
</html>
This code works for me:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}
But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:
function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}
Here are the buttons:
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
My two-cent's worth...
Cheers