Question

我正在使用html视频标签播放视频。在播放视频时，我希望视频的当前帧不是＆＃34; currentTime＆＃34;使用jquery或javascript。

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

Answer 1

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

＆＃13;

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

＆＃13;

<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 height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<div id="controls">
  <button id="play-pause">Play</button>
</div>

＆＃13;

Answer 2

当前帧的图像：

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

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

有一个名为Popcorn.js的Popcorn.capture插件，可让您从HTML5视频的任意框架创建海报。

给出了一些演示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();

});

Answer 4

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

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

Answer 5

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

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

5 个答案:

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