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

Image of the current frame:

function captureVideo(video) {
    var canvas = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var canvasContext = canvas.getContext("2d");
    canvasContext.drawImage(video, 0, 0);
    return canvas.toDataURL('image/png');
}

Current time:

var frameAfterSeek = Math.floor(_video.currentTime);

Answer 2

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>

Answer 3

As far as I know, there is a set standard framerate across browsers or any way of accessing the current frame out of the box with html5 video. What you could do though is use the television standard framerate of 29.97 frames per second and simply multiply that by the video's current time like so: (vid.currentTime * 29.97).toPrecision(6).

Hope this may help u-

var vid = $('#video1')[0];
 $('#btn').bind('click', function() {
   $('#time').html((vid.currentTime * 29.97).toPrecision(6));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btn">Get Frame</button><p id="time"></p>
<video id="video1" controls tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

---

Re - If u Need to Capture an Image Frame or Want to Do some Custom Works-

There is a Popcorn.js plugin called Popcorn.capture which will allow you to create posters from any frame of your HTML5 video.

Some demo are given here.

There is a limitation that is imposed by the browser that prohibits reading pixel data of resources requested across domains (using the canvas API to record the current value of a frame). The source video must be hosted on the same domain as the script and html page that is requesting it for this approach to work.

The code to create poster using this plugin is quite simple:

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {

  this.currentTime( 10 ).capture();

});