HTML5视频截图

发布于 2024-10-05 23:48:19 字数 365 浏览 2 评论 0原文

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

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

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

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

原文

I'm trying to take a screenshot of video with predefined time in the movie. So I tried it with the canvas element. The thing is that the video must be playing when you draw the image of the video, but I need the image to still be paused. So I tried this:

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

But as you probably can imagine, the video pauses before the canvas is done drawing, resulting in no screenshot. So is there a callback function for drawImage? In my case, the drawing process takes about 50ms, but it doesn't feel safe to do:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫烠⑼条掵仅有一顆心 2024-10-12 23:48:19

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

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

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

Rather than pausing you could try setting the video's playbackrate to something very low (or zero if that works?):

video.playbackRate = 0.0001; // or 0

This will effectively pause the video for you.

You could also set the canvas to black, tranparency 0.99 and then scan the resulting image in your timeout for a non-black pixel:

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

When using the last method the video must be from the same domain as the script, and will not work on local files because of security constraints.

回复收藏 0 原文