javascript 捕获嵌入视频的第一帧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3749011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capture first frame of an embedded video
提问by hari
I want to capture the first frame of an embedded video as an image without using any server side scripting. Probably with javascript, is it possible?
我想在不使用任何服务器端脚本的情况下将嵌入视频的第一帧捕获为图像。可能使用javascript，有可能吗？
回答by Sam Day
Actually, pretty sure you can, using HTML5. Take a look at this link: HTML5 Video Destruction.
实际上，很确定您可以使用 HTML5。看看这个链接：HTML5 Video Destruction。
It's copying the video frame into another canvas every 33ms. You could play around with this and see if you can capture the first frame when the video starts running.
它每 33 毫秒将视频帧复制到另一个画布中。您可以尝试一下，看看是否可以在视频开始运行时捕获第一帧。
I can look into this further if you like (it fascinates me)
如果你愿意，我可以进一步研究这个（它让我着迷）
EDIT:oh my GOD THIS IS COOL. I just came up with a solution. Go to sambro.is-super-awesome.com/videofirstframe/
编辑：哦，天哪，这太酷了。我只是想出了一个解决方案。转到sambro.is-super-awesome.com/videofirstframe/
You need to open this in Google Chrome. Firefox doesn't support mp4 (I think).
您需要在 Google Chrome 中打开它。Firefox 不支持 mp4（我认为）。
First time I've ever done anything with HTML5, I CANNOT wait until this is in the majority of browsers :)
我第一次用 HTML5 做任何事情，我不能等到大多数浏览器都这样做:)
EDIT EDIT:Okay I uploaded the .ogg version of this video too, and setup my web server to handle the video type correctly, Firefox should work in this little example too.
编辑 编辑：好的，我也上传了这个视频的 .ogg 版本，并设置了我的网络服务器以正确处理视频类型，Firefox 也应该在这个小例子中工作。
EDIT EDIT EDIT:Nitpickers wanting source up here, well here it is:
编辑 编辑 编辑：Nitpickers 想要源代码在这里，这里是：
// Create a video element.
var vid = document.createElement("video");
// We don't want it to start playing yet.
vid.autoplay = false;
vid.loop = false;
// No need for user to see the video itself.
vid.style.display = "none";
// This will fire when there's some data loaded for the video, should be at least 1 frame here.
vid.addEventListener("loadeddata", function()
{
// Let's wait another 100ms just in case?
setTimeout(function()
{
// Create a canvas element, this is what user sees.
var canvas = document.createElement("canvas");
// Set it to same dimensions as video.
canvas.width = vid.videoWidth;
canvas.height = vid.videoHeight;
// Put it on page.
document.getElementById("done").innerHTML = "";
document.getElementById("done").appendChild(canvas);
// Get the drawing context for canvas.
var ctx = canvas.getContext("2d");
// Draw the current frame of video onto canvas.
ctx.drawImage(vid, 0, 0);
// Done!
});
}, false);
// Have to include .ogv for firefox. I don't think this is working atm because my webserver isn't serving up
// videos properly.
if(BrowserDetect.browser == "Firefox")
{
var source = document.createElement("source");
source.src = "BigBuckBunny_640x360.ogv";
source.type = "video/ogg";
vid.appendChild(source);
}
else
{
var source = document.createElement("source");
source.src = "BigBuckBunny_640x360.mp4";
source.type = "video/mp4";
vid.appendChild(source);
}
// Add video to document to start loading process now.
document.body.appendChild(vid);
