HTML5视频截图截图组
HTML5视频截图截图组
提问于 2012-07-26 23:06:51
我正在尝试使用canvas在浏览器中使用以下代码从HTML5视频中生成一组缩略图：
var fps = video_model.getFps(); //frames per second, comes from another script
var start = shot.getStart(); //start time of capture, comes from another script
var end = shot.getEnd(); //end time of capture, comes from another script
for(var i = start; i <= end; i += 50){ //capture every 50 frames
video.get(0).currentTime = i / fps;
var capture = $(document.createElement("canvas"))
.attr({
id: video.get(0).currentTime + "sec",
width: video.get(0).videoWidth,
height: video.get(0).videoHeight
})
var ctx = capture.get(0).getContext("2d");
ctx.drawImage(video.get(0), 0, 0, video.get(0).videoWidth, video.get(0).videoHeight);
$("body").append(capture, " ");
}捕获的数量是正确的，但问题是在Chrome中所有的画布都显示为黑色，而在Firefox中它们总是显示相同的图像。
也许问题是循环太快，无法让画布被绘制，但我读到.drawImage()是异步的，因此，从理论上讲，它应该在跳到下一行之前让画布被绘制。
对如何解决这个问题有什么想法吗？谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-07-27 20:05:57
经过几个小时的努力，我终于想出了一个基于"seeked“事件的解决方案。要实现此操作，必须完全加载视频：
代码是这样的：
var fps = video_model.getFps(); //screenshot data, comes from another script
var start = shot.getStart();
var end = shot.getEnd();
video.get(0).currentTime = start/fps; //make the video jump to the start
video.on("seeked", function(){ //when the time is seeked, capture screenshot
setTimeout( //the trick is in giving the canvas a little time to be created and painted, 500ms should be enough
function(){
if( video.get(0).currentTime <= end/fps ){
var capture = $(document.createElement("canvas")) //create canvas element on the fly
.attr({
id: video.get(0).currentTime + "sec",
width: video.get(0).videoWidth,
height: video.get(0).videoHeight
})
.appendTo("body");
var ctx = capture.get(0).getContext("2d"); //paint canvas
ctx.drawImage(video.get(0), 0, 0, video.get(0).videoWidth, video.get(0).videoHeight);
if(video.get(0).currentTime + 50/fps > end/fps){
video.off("seeked"); //if last screenshot was captured, unbind
}else{
video.get(0).currentTime += 50/fps; //capture every 50 frames
}
}
}
, 500); //timeout of 500ms
});这对我在Chrome和Firefox中很有效，我读到过seeked事件在某些版本的特定浏览器中可能会有be。
希望这对任何人都有用。如果有人想出一个更干净、更好的解决方案，那就太好了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11672343
复制相关文章
相似问题
腾讯云开发者
