获取 HTML5 视频中的帧数 [英] 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.

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

我已将帧编号添加到 Adob​​e After Effect 视频的每一帧中，以便我有更准确的差异信息.视频以 29.97fps 运行，并且 requestAnimationFrame 也设置为以相同的速率增加数量，但是我不确定这种差异来自哪里.

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.

推荐答案

我在 github 上为此找到了一些东西.https://github.com/allensarkisyan/VideoFrame

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

我已经在这个小提琴中实现了它:https://jsfiddle.net/k0y8tp2v/>

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

更新了新视频的小提琴，使其再次运行.

updated fiddle to new video so it works again.

正如所指出的，视频是 25fps，所以我更新了它，并在那里消除了对 jQuery 的依赖.
非 jQuery 版本:
https://jsfiddle.net/k0y8tp2v/1/

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

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