javascript - 从视频中抓取第 n 帧进行预览

Question

如果我的 javascript 文档中有一个视频文件，如何从中间抓取一帧？这会抓取当前帧，但我想要中间的帧作为缩略图。这是很容易就能做到的事情吗？这种方法可行，但抓取完成后我无法将帧设置回开头。

http://jsbin.com/betibe

var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

var cw = canvas.width;
var ch = canvas.height;

draw(v,context,cw,ch);
v.currentTime = 5;

function draw(v,c,w,h) {
  c.drawImage(v,0,0,w,h);
  setTimeout(draw,20,v,c,w,h);
}

Answer 1

我对之前的回答表示歉意，

video.seekTo({ frame: frameNum });

帮我解决了这个问题。根据需要自定义frameNum。

Demo

HTML:

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

JS:

var currentFrame = $('#currentFrame');
var frameNum =100;

var video = VideoFrame({
    id : 'video',
    frameRate: 29.97,
    callback : function(frame) {
        currentFrame.html(frame);
    }
});

video.seekTo({ frame: frameNum });


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

有关视频帧的引用，请访问:https://github.com/allensarkisyan/VideoFrame