HTML5 视频截图

Posted 2023-03-05

【中文标题】HTML5 视频截图

【英文标题】：HTML5 video screenshot

【发布时间】：2011-05-19 01:01:25

【问题描述】：

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

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

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

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

【问题讨论】：

呵呵，这些画布和视频问题似乎很难找到答案

看看这篇文章，应该会有帮助，并且有一个 html5 画布的视频截图演示：techslides.com/create-youtube-screenshots-with-html5-and-canvas

【参考方案1】：

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

【讨论】：

他可以，这是一个很好的答案，但这并不是让我的问题奏效的原因。根据测试，我发现它可以在不减慢视频速度的情况下完成。

有人可以提供有关如何执行此操作的完整详细信息。我被困在这个

【参考方案2】：

您可以尝试将视频的播放速率设置为非常低的值（如果可行，则设置为零？），而不是暂停：

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

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

【讨论】：

太好了，这应该确实有效。为答案+1，我试过后会回到这里！

【参考方案3】：

我不确定这是您想要的，但您是否尝试过使用 MWSnap 手动截取屏幕截图？它会在您截屏时冻结屏幕，所以我想它可能对您有用。