Получить видео первого кадра в JavaScript

Question

Как я могу получить первый кадр видеофайла в javascript как изображение?

Answer 1

Просто добавьте тег видео на страницу без элементов управления и автоматического воспроизведения.

<video width="96" height="54" class="clip-thumbnail"> ... </video>

Недостатком является то, что пользователи могут воспроизводить видео, щелкнув правой кнопкой мыши по миниатюре и выбрав «play» в контекстном меню. Чтобы избежать этого, вам нужно немного прослушать javascript на события кликов и отменить их (удаление контекстного меню из миниатюр).

Answer 2

Как уже упоминалось, Javascript не может сделать это.

Если вы хотите создать миниатюры для ваших видео, вы должны создать серверную часть миниатюр, а затем просто подать изображение на клиенте, как и любое другое изображение.

Мой метод выбора для этого - декодер ffmpeg . Он может обрабатывать множество форматов файлов и может делать то, что вы хотите. Так что если у вас есть видео с именем hello.avi, вы можете сделать:

ffmpeg -itsoffset -1 -i /path/to/hello.avi -vcodec mjpeg -vframes 1 -an -f rawvideo -s 200x150 /path/to/hello.jpg

Вы можете запустить эту команду (исправляя пути и измерения ...) с любым языком на стороне сервера, который вы используете, и он создаст миниатюру видеофайла.

Answer 3

Javascript не способен сделать это.

Answer 4

Это можно сделать с помощью тегов HTML 5 video и canvas:

HTML:

<input type="file" id="file" name="file">

<video id="main-video" controls>
   <source type="video/mp4">
</video>

<canvas id="video-canvas"></canvas>

Javascript:

var _CANVAS = document.querySelector("#video-canvas");
var _CTX = _CANVAS.getContext("2d");
var _VIDEO = document.querySelector("#main-video");

document.querySelector("#file").addEventListener('change', function() {

    // Object Url as the video source
    document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file").files[0]));

    // Load the video and show it
    _VIDEO.load();

    // Load metadata of the video to get video duration and dimensions
    _VIDEO.addEventListener('loadedmetadata', function() {
        // Set canvas dimensions same as video dimensions
        _CANVAS.width = _VIDEO.videoWidth;
        _CANVAS.height = _VIDEO.videoHeight;
    });

    _VIDEO.addEventListener('canplay', function() {
        _CANVAS.style.display = 'inline';
        _CTX.drawImage(_VIDEO, 0, 0, _VIDEO.videoWidth, _VIDEO.videoHeight);
    });

});

Посмотреть демонстрацию

Answer 5

Это может быть возможно, если видео является файлом, выбранным пользователем в <input type="file">, вы можете получить видеоданные base-64 с помощью API FileReader:

https://developer.mozilla.org/en-US/docs/DOM/FileReader

Оттуда у вас осталась крайне сложная проблема: декодировать видео и каким-то образом выбрать и отобразить один кадр в javascript. В качестве альтернативы, вы можете просто включить все видео в качестве «предварительного просмотра эскизов» (я полагаю, именно поэтому вы делаете это?), Как показано здесь:

http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/

Хотя не уверен насчет совместимости этого последнего примера или того, насколько хорошо он работает с большими видеофайлами (я слышал, вы можете легко столкнуться с ограничениями длины URL)