Миниатюры кадров

Миниатюры кадров отображаются при наведении курсора на линию перемотки. Чтобы это работало, нужно сделать несколько вещей:

1. Создать коллекции кадров (картинки порциями склеиваются в одну)
2. Разметить миниатюры по времени, чтобы плеер знал когда и что показать
3. Подключить файл разметки к плееру

1. Коллекции

Обычно, коллекция кадров представляет собой jpg со склеенным кадрами 160x90 (размер может быть любой). Вот пример такой картинки из Youtube:

Склеивание миниатюр позволяет сэкономить ресурсы на запросах к серверу, но это не обязательно - можно хранить все кадры отдельными картинками. Вы также можете использовать однокадровые mp4 вместо jpg.

2. Разметка

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

WEBVTT
00:02.000 --> 00:05.873
//site.com/collection1.jpg#xywh=0,0,160,90
00:05.874 --> 00:07.362
//site.com/collection1.jpg#xywh=160,0,160,90
00:07.363 --> 00:10.399
//site.com/collection1.jpg#xywh=320,0,160,90

Время указывается в формате HH:MM:SS:MMM (часы:минуты:секунды.миллисекунды). Можно убрать в начале часы, как в примере, если они не нужны.

Ниже указывается ссылка на коллекцию с координатами нужного кадра в пикселях (по x, по y, ширина, высота). В примере указаны три первых кадра первого ряда коллекции. Если вы не используете коллекции и все кадры загружаются отдельно, то размечать координаты не нужно - просто указывайте ссылку на картинку.

3. Подключение

В редакторе нужно включить модуль миниатюр Модули / Миниатюры

Ссылку на файл разметки следует указать плееру параметром thumbnails (его можно использовать и в плейлистах)

var player = new Playerjs({"thumbnails":"//site.com/thumbnails.txt"

Для загрузки текстовых файлов всегда учитывайте кроссдоменные ограничения.

Как часто делать миниатюры

Рекомендуют делать кадры с частотой в зависимости от длительности видео

• 2 секунды (менее 2 минут)
• 5 секунд (от 2 до 10 минут)
• 10 секунд (от 10 до 30 минут)
• 20 секунд (от 30 до 60 минут)
• 30 секунд (более 60 минут)

Стили

Настроить стили миниатюр можно в конструкторе. Но если вам нужен прямой доступ через CSS, то с версии 12.12 его можно получить по id pjs_thumbnail_[id]

[id] - это id контейнера плеера. Допустим, плеер находится в контейнере player, тогда идентификатор блока миниатюр будет называться pjs_thumbnail_player (внутри этого блока находится тег img с картинкой).

Создание коллекции кадров с помощью FFmpeg

Для создания изображений из файлов видео обычно используют утилиту FFmpeg. Запуск команд осуществляется из командной строки, типовой запрос для создания коллекции картинок из MP4

ffmpeg -i "input.mp4" -vsync vfr -vf "select=isnan(prev_selected_t)+gte(t-prev_selected_t\,5),scale=160:90,tile=5x5" -qscale:v 3 "output%03d.jpg"

• 5 сохраняем кадр каждые 5 секунд
• 160:90 в коллекции будут картинки 160 на 90 пикселей (для видео с соотношением сторон 16x9), сложенные в мозаику 5x5
• 3 качество сжатия изображения и вес (чем меньше, тем лучше качество и больше вес)
• output%03d.jpg коллекции картинок генерируются с трехзначным номером output001.jpg, output002.jpg и так далее.

Пример скрипта на PHP, который готовит картинки и файл разметки.

PHP

Скачать скрипт

Протестировано в версии FFmpeg 4.0

Это пример скрипта, который создает миниатюры кадров из видео и генерирует файл разметки.

Для работы требуются библиотеки FFmpeg и FFprobe (в скрипте настраиваются пути к бинарным файлам, если они не установлены). В настройках также настраиваются параметры:

• ширина миниатюр (по умолчанию 160 пикселей), высота считается автоматически
• размер коллекции (по умолчанию 5x5)
• URL и название папки, куда складываются картинки

Для запуска нужно указать две переменные - file (файл видео) и output (файл с разметкой, который сгенерируется в итоге)

thumbnails.php?file=video.mp4&output=video.vtt

Скрипт создаст коллекции картинок с нужным интервалом и сгенерирует файл разметки в формате WebVTT

---