javascript - HTML5视频截图

Question

我正在尝试截取电影中具有预定义时间的视频。所以我用 Canvas 元素试了一下。问题是当你绘制视频图像时视频必须正在播放，但我需要图像仍然暂停。所以我尝试了这个:

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

但正如您可能想象的那样，视频在 Canvas 绘制完成之前暂停，导致没有屏幕截图。那么drawImage有回调函数吗？就我而言，绘图过程大约需要 50 毫秒，但这样做并不安全:

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

Answer 1

与其暂停，您还可以尝试将视频的播放速率设置为非常低的值(或者零，如果可行的话？):

video.playbackRate = 0.0001; // or 0

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

您还可以将 Canvas 设置为黑色，透明度为 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);

当使用最后一种方法时，视频必须来自与脚本相同的域，并且由于安全限制将无法在本地文件上运行。