Захватить первый кадр встроенного видео

Question

Я хочу захватить первый кадр внедренного видео в виде изображения без использования сценариев на стороне сервера. Возможно с javascript, это возможно?

Answer 1

На самом деле, уверен, что вы можете, используя HTML5. Взгляните на эту ссылку: HTML5 Video Destruction .

Копирование видеокадра на другой холст каждые 33 мс. Вы можете поиграть с этим и посмотреть, сможете ли вы захватить первый кадр, когда видео начнет работать.

Я могу посмотреть на это дальше, если хотите (это очаровывает меня)

РЕДАКТИРОВАТЬ: Боже мой, это круто. Я только что нашел решение. Перейдите на sambro.is-super-awesome.com / videofirstframe /

Вам нужно открыть это в Google Chrome. Firefox не поддерживает mp4 (я думаю).

В первый раз, когда я что-то сделал с HTML5, я НЕ МОГУ ждать, пока это не произойдет в большинстве браузеров:)

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ: Хорошо, я также загрузил версию этого видео в формате .ogg и настроил мой веб-сервер для правильной обработки типа видео, Firefox также должен работать в этом небольшом примере.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ: 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);