javascripthtmlvideorequestanimationframepopcornjs

Get frame numbers in HTML5 Video


I am trying to capture each frame number of the video however it looks like there is no way of achieving it. So I started my own clock to match the frame numbers of the video but they never match and the difference keeps increasing as the video progress.

Please have a look at my bin. http://jsbin.com/dopuvo/4/edit

I have added the frame number to each frame of the video from Adobe After Effect so I have more accurate information of the difference. The Video is running at 29.97fps and the requestAnimationFrame is also set to increase the number at the same rate, however I am not sure where this difference is coming from.

Sometimes they match and sometimes they don't. I also tried doing it offline but I get the same results. Any help.


Solution

  • I found something on github for this. https://github.com/allensarkisyan/VideoFrame

    I have implemented it in this fiddle: https://jsfiddle.net/k0y8tp2v/

    var currentFrame = $('#currentFrame');
    var video = VideoFrame({
        id : 'video',
        frameRate: 25,
        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');
        }
    });
    

    EDIT: updated fiddle to new video so it works again.

    EDIT: As pointed out, the video is 25fps, so I updated it, and while I was there removed reliance on jQuery.
    Non jQuery version:
    https://jsfiddle.net/k0y8tp2v/1/

    var currentFrame = document.getElementById('currentFrame');
    var video = VideoFrame({
        id : 'video',
        frameRate: 25,
        callback : function(frame) {
            currentFrame.innerHTML = frame ;
        }
    });
    
    document.getElementById('play-pause').addEventListener('click', function(e){
        if(video.video.paused){
            video.video.play();
            video.listen('frame');
            e.target.innerHTML = 'Pause';
        }else{
            video.video.pause();
            video.stopListen();
            e.target.innerHTML = 'Play';
        }
    });