HTML5视频截图

我试图在电影中预定义时间截取视频。所以我用画布元素试了一下。问题是，当您绘制视频图像时必须播放视频，但我需要图像仍然暂停。所以，我想这一点：HTML5视频截图

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

但正如你可能会想到，在视频暂停前的画布绘制完，导致没有屏幕截图。那么是否有drawImage的回调函数？在我的情况下，绘图过程需要50ms左右，但它并没有感到安全的事：

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

来源

2010-12-02 tbleckert

+1等待答案:) – 2010-12-02 10:42:37

嘿嘿，好像这些画布和视频的问题很难找到答案 – tbleckert 2010-12-02 10:46:48

看看这篇文章，应该会有帮助，并有HTML5 canvas的视频截图演示：http：///techslides.com/create-youtube-screenshots-with-html5-and-canvas/ – iwek 2012-07-20 13:41:55

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

来源

2011-02-08 08:24:58 tbleckert

我不知道这是你以后，但是你试过采取截图使用手动MWSnap？当你截图的时候它会冻结屏幕，所以我猜它可能适合你。

来源

2011-01-03 08:33:01 mingos

而不是暂停，你可以尝试将视频的playbackrate设定为非常低（或零是否可行？）：

video.playbackRate = 0.0001; // or 0

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

您也可以在画布设置为黑色，tranparency 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);

当采用后一种方法的视频必须是同一域作为脚本，并且由于安全限制而不能在本地文件上工作。

来源

2011-01-03 09:20:59 stef

HTML5视频截图

回答

相关问题