Get video frame count HTML

Question

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>

score 3 · Accepted Answer · answered Jul 13 '16 at 06:17

3

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.

answered Jul 13 '16 at 06:17

ivywit

473
2
8
17

score 3 · Answer 2 · answered Jul 13 '16 at 06:18

3

You need to include jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

answered Jul 13 '16 at 06:18

DAXaholic

33,312
6
76
74

score 1 · Answer 3 · answered Jul 13 '16 at 06:20

1

Try adding a call to jquery library

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

answered Jul 13 '16 at 06:20

Ram Segev

2,563
2
12
24

Get video frame count HTML

3 Answers3