在javascript / jquery中获取当前video帧

我正在使用htmlvideo标签播放video。 在播放video时，我希望video的当前帧不是使用jquery或javascript的“currentTime”。

我可以通过计算video和currentTime的fps来获取当前帧，但它没有给出确切的帧编号。 我有什么想法可以解决这个问题？

Answer 1

请查看以下演示。 只有一件事是你必须分配一个video的frameRate。 外部Js将管理所有事情，您可以轻松获得帧号。

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

   
 0 
  
 Play  

Answer 2

据我所知，有一个跨浏览器设置标准帧率或任何方式使用html5video开箱即用访问当前帧。 你可以做的是使用每秒29.97帧的电视标准帧速率，然后将其乘以video的当前时间，如： (vid.currentTime * 29.97).toPrecision(6) 。

希望这可能有助于你

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

  Get Frame
  

Answer 3

你试过用这个补丁吗？ https://github.com/X3TechnologyGroup/VideoFrame

我相信它会对你有所帮助。

Answer 4

当前帧的图像：

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

当前时间：

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

Answer 5

我找到了那个问题的原因。 我正在压缩我的video因此在压缩时，fps降低了，这就是为什么我无法获得正确的fps。 现在我能够得到1-2帧的差异，但没关系。 谢谢你的帮助。