Question

我正试图在电影中拍摄预定义时间的视频截图。所以我尝试使用canvas元素。问题在于，当您绘制视频图像时，视频必须正在播放，但我仍然需要暂停图像。所以我尝试了这个：

video.play();
context.drawImage(video,0,0,canvas.width,canvas.height);
video.pause();

但正如您可能想象的那样，视频在画布完成绘制之前暂停，导致没有截图。那么drawImage有回调函数吗？在我的情况下，绘图过程大约需要50ms，但做起来感觉不安全：

setTimeout(function() { video.pause(); }, 50);

Answer 1

而不是暂停你可以尝试将视频的播放设置为非常低的值（如果有效则为零）？：

video.playbackRate = 0.0001; // or 0

这将有效地为您暂停视频。

您还可以将画布设置为黑色，透明度0.99，然后在超时时扫描生成的图像以获得非黑色像素：

setTimeout(function() { 
  pixel = context.getImageData(image.width/2, image.height/2, 1, 1);
  // do something with the pixel, kick off another timeout if it is still has transparency
}, 50);

使用最后一种方法时，视频必须来自与脚本相同的域，并且由于安全限制，不能对本地文件起作用。

Answer 2

我不确定这是你所追求的，但您是否尝试使用MWSnap手动截取屏幕截图？当你拍摄截图时，它会冻结屏幕，所以我猜它可能适合你。

Answer 3

嗯......似乎实际上可以从暂停的视频中绘制图像。只需保持间隔从开始。

HTML5视频截图

3 个答案: