在HTML5视频中获取帧编号 [英] Get frame numbers in HTML5 Video

问题描述

我试图捕捉视频的每个帧数，但看起来没有办法实现它。所以我开始自己的时钟，以匹配视频的帧数，但他们从来没有匹配，随着视频的进步，差异不断增加。

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

我已将帧号添加到Adobe After Effects的每个视频帧中，以便我获得更准确的差异信息。视频运行速度为29.97fps，requestAnimationFrame也设置为以相同的速率增加数量，但我不确定这种差异来自哪里。

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

解决方案

我在github上找到了这个东西。 https://github.com/allensarkisyan/VideoFrame

我有在这个小提琴中实现它： http://jsfiddle.net/Ck6Zq/184/

  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'）; 
} 
}）; 
  

编辑：更新小提琴到新视频， p>

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.

解决方案

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

I have implemented it in this fiddle: http://jsfiddle.net/Ck6Zq/184/

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');
    }
});

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

这篇关于在HTML5视频中获取帧编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！