在 javascript / jquery 中获取当前视频帧

Posted 2023-05-08

【中文标题】在 javascript / jquery 中获取当前视频帧

【英文标题】：Get current frame of video in javascript / jquery

【发布时间】：2016-06-16 23:24:13

【问题描述】：

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

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

【问题讨论】：

嗨，你想要一些东西来寻找或捕捉帧以捕捉图像吗？

【参考方案1】：

当前帧的图像：

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

【参考方案2】：

请查看下面的演示。只有一件事是您必须分配视频的帧率。 External Js 将管理所有事情，您可以轻松获取 Frame 编号。

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

<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="frame">  
  <span id="currentFrame">0</span>
  </div>

<video   id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<div id="controls">
  <button id="play-pause">Play</button>
</div>

【参考方案3】：

据我所知，跨浏览器或使用 html5 视频开箱即用地访问当前帧的任何方式都有一套标准帧速率。您可以做的是使用每秒 29.97 帧的电视标准帧速率，然后简单地将其乘以视频的当前时间，如下所示：(vid.currentTime * 29.97).toPrecision(6)。

希望对你有帮助-

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btn">Get Frame</button><p id="time"></p>
<video id="video1" controls tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

---

Re - 如果您需要捕获图像帧或想要做一些自定义工作-

有一个名为Popcorn.capture 的Popcorn.js 插件可以让您从HTML5 视频的任何帧创建海报。

一些demo给了here。

浏览器施加了一个限制，禁止读取跨域请求的资源的像素数据（使用canvas API 记录帧的当前值）。源视频必须与请求它的脚本和 html 页面托管在同一域中，才能使这种方法正常工作。

使用这个插件创建海报的代码非常简单：

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() 

  this.currentTime( 10 ).capture();

);

【参考方案4】：

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

我相信它会帮助你。

【讨论】：

我找到了导致该问题的原因。我正在压缩我的视频，因此压缩 fps 会降低，这就是我无法获得正确 fps 的原因。

【参考方案5】：

我找到了导致该问题的原因。我正在压缩我的视频，因此在压缩时，fps 会降低，这就是我无法获得正确 fps 的原因。现在我能够得到 1-2 帧的差异，但这没关系。谢谢你们的帮助。

【讨论】：

这不应该是接受的答案，请将适当的答案标记为接受。