HTML5视频截图

Question

我正在尝试在电影中预定义时间点截取视频截图。因此，我使用了画布元素进行尝试。问题是当你绘制视频的图像时，视频必须正在播放，但我需要图像仍然保持暂停状态。所以我尝试了以下方法：

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

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

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

- tbleckert

---

呵呵，看起来这些关于画布和视频的问题很难找到答案。 - tbleckert

看看这篇文章，应该会很有帮助，其中有一个使用 HTML5 画布的视频截图演示：http://techslides.com/create-youtube-screenshots-with-html5-and-canvas/ - iwek

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

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

- stef

---

太好了，那应该可以正常工作。给你的答案点个赞，等我试过之后再回来！ - tbleckert

Answer 2

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

- tbleckert

---

他的回答很好，但并不是解决我的问题的关键。通过测试，我发现可以在不减慢视频速度的情况下完成它。 - tbleckert

有人能提供如何完成这个的详细信息吗？我在这里遇到了困难。 - Yalamber

Answer 3

我不确定这是否是您想要的，但您是否尝试使用MWSnap手动进行截屏？它在您截屏时会冻结屏幕，所以我猜它可能适合您。

- mingos