Получить первый видеофрагмент в javascript

Question

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

Answer 1

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

Это может быть возможно, если видео файл, выбранный пользователем в <input type="file">, вы можете получить видеоданные базового 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-адреса)

Answer 4

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

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

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