Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 捕获嵌入式视频的第一帧_Javascript_Html_Image_Video - Fatal编程技术网

Javascript 捕获嵌入式视频的第一帧

Javascript 捕获嵌入式视频的第一帧,javascript,html,image,video,Javascript,Html,Image,Video,我希望在不使用任何服务器端脚本的情况下,将嵌入式视频的第一帧捕获为图像。可能是使用javascript,可以吗?事实上,非常肯定您可以使用HTML5。请查看此链接: 它每33毫秒将视频帧复制到另一个画布上。你可以玩一下这个游戏,看看你能不能在视频开始运行时捕捉到第一帧 如果你愿意的话,我可以进一步研究(它让我着迷) 编辑:哦,天哪,这太酷了。我刚想出一个解决办法。去 你需要在谷歌浏览器中打开这个。Firefox不支持mp4(我认为) 我第一次用HTML5做任何事情,我都迫不及待地想在大多数浏览器

我希望在不使用任何服务器端脚本的情况下,将嵌入式视频的第一帧捕获为图像。可能是使用javascript,可以吗?

事实上,非常肯定您可以使用HTML5。请查看此链接:

它每33毫秒将视频帧复制到另一个画布上。你可以玩一下这个游戏,看看你能不能在视频开始运行时捕捉到第一帧

如果你愿意的话,我可以进一步研究(它让我着迷)

编辑:哦,天哪,这太酷了。我刚想出一个解决办法。去

你需要在谷歌浏览器中打开这个。Firefox不支持mp4(我认为)

我第一次用HTML5做任何事情,我都迫不及待地想在大多数浏览器中使用它:)

编辑:好的,我也上传了这个视频的.ogg版本,并设置了我的web服务器来正确处理视频类型,Firefox在这个小示例中也可以使用

编辑:吹毛求疵的人想要在这里找到来源,好了,就在这里:

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

请查看此…&如果发现问题,请回复solution@hari:请注意,这将需要一个非常最新的浏览器。没有问题,Crowder……我只想在这种情况下工作,即使旧浏览器不支持。我附上了一个演示如何做到这一点,请查看我的更新答案。嗨,山姆,你能解释一下它是如何工作的吗?它和youtube嵌入式视频一起工作吗。你能把视频也贴出来吗