Intereting Posts
Angular2 router 2.0.0 не перезагружает компоненты, когда тот же url загружен с различными параметрами? Как поместить jpg или png изображение в кнопку в HTML IE z-index относительная / абсолютная ошибка в списке Функция, которая генерирует несколько динамических идентификаторов с определенным шаблоном Дисплей параметров не работает в safari Угловой материал Flexbox – Как добавить маржу между обернутыми рядами? Javascript – onchange в Отобразить строку в HTML и сохранить пробелы и разрывы строк Мое фиксированное меню Nav Header не останется в div, в котором он содержится. Является ли это отзывчивой проблемой? html -split страницу в нужные фигуры как divs? Как создать прокручиваемое текстовое поле? Скопируйте содержимое div в другой div Угловое 2: привязка свойств HTML Головка тега после закрытия корпуса табулятора Как получить HTML-тег, который отображается на экране UIWebView, из всего HTML-тега, загруженного в UIWebView

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

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

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

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

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

EDIT: О, мой БОГ, ЭТО ОХЛАЖДЕНИЕ. Я только что придумал решение. Перейдите на страницу sambro.is-super-awesome.com/videofirstframe/

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

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

EDIT EDIT: Хорошо, я загрузил также версию .gg этого видео и настроил свой веб-сервер для правильного управления типом видео, Firefox тоже должен работать в этом маленьком примере.

EDIT EDIT EDIT: 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); 

простой ответ: нет.