Get current frame of video in javascript / jquery

Question

I am playing video using the html video tag. While playing video I want the current frame of the video not "currentTime" using jquery or javascript.

I am able to get the current frame by doing the calculation of the fps of video and currentTime, but it is not giving the exact frame number. Any ideas how I can fix this?

Answer 1

Please check out below demo. Only one thing is you have to assign a frameRate of video. External Js will manage all thing and you can get Frame number easily.

var currentFrame = $('#currentFrame');
var video = VideoFrame({
    id : 'video',
    frameRate: 29.97,
    callback : function(frame) {
        currentFrame.html(frame);
    }
});

$('#play-pause').click(function(){
    ChangeButtonText();
});

function ChangeButtonText(){
  if(video.video.paused){
        video.video.play();
        video.listen('frame');
        $("#play-pause").html('Pause');
    }else{
        video.video.pause();
        video.stopListen();
        $("#play-pause").html('Play');
    }
  }

<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <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>