CodeDezk CodeDezk - 4 months ago 26
HTML Question

Get video frame count HTML

I am trying to get video frame count as the code here http://jsfiddle.net/Ck6Zq/184/

I have downloaded videoFrame.js from here https://github.com/allensarkisyan/VideoFrame 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>

Answer

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.