javascript - 获取 HTML5 视频中的帧数

Question

我正在尝试捕捉视频的每一帧编号，但看起来无法实现。所以我开始自己的时钟来匹配视频的帧数，但它们永远不会匹配，并且随着视频的进展，差异不断增加。

请看看我的垃圾箱。 http://jsbin.com/dopuvo/4/edit

我已将帧编号添加到来自 Adob​​e After Effect 的视频的每一帧，以便我获得更准确的差异信息。视频以 29.97fps 的速度运行，并且 requestAnimationFrame 也设置为以相同的速率增加数字，但我不确定这种差异来自何处。

有时它们匹配，有时它们不匹配。我也尝试离线进行，但我得到了相同的结果。任何帮助。

Answer 1

我在 github 上找到了一些关于这个的东西。 https://github.com/allensarkisyan/VideoFrame

我已经在这个 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');
    }
});

编辑:将 fiddle 更新为新视频，使其再次运行。

编辑:正如指出的那样，视频是 25fps，所以我更新了它，同时我在那里删除了对 jQuery 的依赖。
非 jQuery 版本:
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';
    }
});