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

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

Ответы на вопрос(1)

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

Он копирует видеокадр в другой холст каждые 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);
 Yi Jiang20 сент. 2010 г., 08:59
Немного придирки, но такие сценарии, как Modernizr, определенно будут лучше, если вы попытаетесь определить, какой формат видео использовать. Зачем включать jQuery, если вы не используете его ни для чего? Кроме того, вы должны включить сюда код, чтобы нам не приходилось заходить на ваш сайт, чтобы просто посмотреть код.
 Sam Day20 сент. 2010 г., 10:56
@hari: это будет работать только с видео тегом!
 Russell08 дек. 2010 г., 07:34
Я не вижу смысла ждать лишние 100 мс. Вместо «загруженных данных» я бы также посмотрел на «приостановить». Смотрите события наdeveloper.mozilla.org/En/Using_audio_and_video_in_Firefox, В нем есть фраза «приостановлена ​​по любой другой причине», а в Firefox это может означать «Я загрузил столько, сколько мне нужно, не теряя всю пропускную способность».
 Sam Day20 сент. 2010 г., 09:04
@Yi Jiang: Также спасибо за успехи в Modernizr, никогда не видел этот инструмент, и он выглядит невероятно полезным!
 Sam Day20 сент. 2010 г., 08:49
Хари, взгляни на код в index.html, чтобы увидеть, как я это сделал. Что касается этого для видео на YouTube, возможно, я не уверен, есть ли еще способ получить прямую ссылку на видео в кодировке HTML5 с YouTube. Встраивание iframe не будет адекватным.
 Sam Day20 сент. 2010 г., 08:31
Я приложил демонстрацию того, как это сделать, проверьте мой обновленный ответ.
 hari20 сент. 2010 г., 08:15
пожалуйста, посмотрите на это ... и ответьте, если вы нашли решение
 T.J. Crowder20 сент. 2010 г., 08:21
@hari: обратите внимание, что для этого потребуется очень современный браузер.
 hari20 сент. 2010 г., 08:40
Привет Сэм, не могли бы вы объяснить, как это работает и работает ли оно со встроенным видео YouTube. Можете ли вы опубликовать видео тоже
 Sam Day20 сент. 2010 г., 09:02
@Yi Jiang: Все, что вы сказали, достаточно справедливо, вам нужно учесть следующее: я был взволнован и хотел получить демоверсию как можно скорее. Я использовал jQuery для правильной загрузки (почему бы и нет?), Я никогда не работал с HTML5-видео или Canvas, и это должно было быть лишь небольшим доказательством концепции :)
 hari20 сент. 2010 г., 09:34
Привет Сэм, это можно сделать с помощью тега вставки вместо тега видео
 Sam Day21 сент. 2010 г., 00:07
@hari: К сожалению, нет никакого способа, которым это сработает для встраивания или тегов объектов, поскольку это, как правило, Flash-видео, и на самом деле нет надежного способа извлечь то, что видео воспроизводится из контейнера (в любом случае, не из JS). Даже если вы нашли способ сделать это, видео должно быть внутри тега <video> HTML5, и это будет работать только с видео h264 / ogg / webM (поддержка зависит от браузера)
 hari20 сент. 2010 г., 08:28
Нет проблем, Crowder ...... Я просто хочу, чтобы это работало в этом сценарии, даже если старые браузеры не поддерживают
 hari20 сент. 2010 г., 11:05
Да, я пытался с тегами вставки и объекта, но это не сработало. Есть ли альтернатива, которая работает для видео с тегами вставки. Мое требование заключается в том, что пользователь вводит URL для встраивания.
 T.J. Crowder20 сент. 2010 г., 08:21
@Sam Day:Вот это да это круто.
 brad18 февр. 2011 г., 19:38
Круто, можете ли вы сделать так, чтобы теперь изображение сохранялось на сервере, возможно ли использовать toDataURL ()?

Ваш ответ на вопрос