Как создать миниатюры предварительного просмотра видео для использования в VideoJS? - PullRequest
Новая
       45

Как создать миниатюры предварительного просмотра видео для использования в VideoJS?

0 голосов
/ 20 октября 2018

Я перешел на VideoJ (html5) и мне нужно выяснить, как генерировать эскизы для панели поиска.Я попытался использовать videojs-thumbnails, однако для этого требуется предварительно загруженный файл vtt со спрайтом.Я пытаюсь найти способ автоматической загрузки миниатюр для обычного файла mp4 (h264).Flowplayer смог сделать это со своими собственными видео, пытаясь теперь выяснить, как это сделать с VideoJs.

Я надеялся, что это был какой-то плагин, который я пропустил, который был способен сделать это, но покаНайди это.Лучшее, что я понял, - это извлечь миниатюры из файла mp4, объединить их в изображение спрайта и использовать атрибут #xywh.

Если в VideoJS нет подключаемого модуля, который автоматически делает это, какая командная строкапрограмму можно использовать для создания файла VTT с изображением спрайта в Ubuntu?Я имею дело с большим количеством видеофайлов, поэтому делать это вручную просто невозможно.

Мой видеопроигрыватель: 

   <div class="video_player_js" style="width:auto; height:auto;">
  <video id="video" class="vjs-16-9 video-js vjs-default-skin vjs-big-play-centered"
    controls preload="auto" width="auto" height="auto"
    data-setup='{"fluid": true}'>
    <source src="test.mp4" type="video/mp4" />
    <track kind="metadata" src="thumbnails.vtt"></track>
    <p class="vjs-no-js">To view this video enabled Javascript.</a></p>
  </video>

Пример файла vtt: 

WEBVTT

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

00:00:03.000 --> 00:00:06.000
thumbnails.jpg#xywh=120,0,120,68

00:00:06.000 --> 00:00:09.000
thumbnails.jpg#xywh=240,0,120,68

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Фактически, существует плагин на основе VideoJS для отображения миниатюр, созданный BrightCove.Смотрите здесь на GitHub:

https://github.com/brightcove/videojs-thumbnails/blob/master/example.html

Базовый постер здесь, кажется, предпочитает генерировать изображения в режиме реального времени и отмечает следующее:

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

Если я что-то не упустил, предпочтительнее и проще создать необходимый VTT-файл.(Информация о миниатюре изображения) в автономном режиме.

РЕДАКТИРОВАТЬ: выбор извлечения в автономном режиме имеет дополнительное преимущество, заключающееся в том, что надежный инструмент 'ffmpeg' кажется очевидным выбором.(Оценив предложенный и незрелый инструмент 'mtn', я отклонил его, потому что мне никогда не удавалось предотвратить его пропуск / пропуск снимков.)

РЕДАКТИРОВАТЬ: BrightCove имеет хороший пример кода и пояснения, в том числе как это сделать.вещи более эффективно, используя видео «спрайты».См. Здесь: https://support.brightcove.com/display-thumbnail-previews-plugin#Example

РЕДАКТИРОВАТЬ: [Я планирую разработать такой пример, и я обновлю этот ответ, когда завершу эту работу ... следите за обновлениями.] Я наконец-то завершил свой подход к реализации "миниатюр"'для видео ... это здесь: https://weasel.firmfriends.us/Private3-BB/

0 голосов
/ 24 октября 2018

Удивлен, я не получил ни одного комментария / ответа.В любом случае, после нескольких дней, я смог найти рабочее решение.Сначала я подумал, что решение будет использовать ffmpeg, однако, хотя оно работало, оно было очень медленным.В конце концов я нашел инструмент linux (также доступный в Windows) под названием mtn (Movie Thumbnailer), который нашел здесь .Этот инструмент смог создать спрайт-изображение из двухчасового фильма за 6 секунд.Я использовал функцию shell_exec в php с опцией -v (verbose), чтобы разобрать время каждого эскиза следующим образом: 

mtn -v -P -s 60 .jpg file.ext 2>&1

Когда-то там была простая логика, анализ и математика длясоздать необходимый файл WebVTT.Все это было сделано в php изначально, за исключением необходимости использовать mtn с shell_exec.

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

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

...