← Cloudflare Stream / stream / viewing-videos

Отображение миниатюр

Сценарий использования 1: создание миниатюры на лету

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

https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg?time=1s&height=270

Пример миниатюры, созданной из примера видео

С помощью poster параметр запроса в URL для встраивания, вы можете задать миниатюру на любой момент времени вашего видео. Если подписанные URL обязательны, необходимо использовать подписанный URL вместо UID видео.

<iframe
  src="https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/iframe?poster=https%3A%2F%2Fcustomer-f33zs165nr7gyfy4.cloudflarestream.com%2F6b9e68b07dfee8cc2d116e4c51d6a957%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
  style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

Поддерживаемые атрибуты URL:

time (по умолчанию 0s, настраивается) видео, например 8m, 5m2s
height (по умолчанию 640)
width (по умолчанию 640)
fit (по умолчанию crop) чтобы уточнить, как поступать, если запрошенные высота и ширина не совпадают с исходной загрузкой; значение должно быть одним из:
- crop обрезает части видео, которые не помещаются в заданный размер
- clip сохраняет весь кадр целиком и уменьшает размер изображения в пределах заданного размера
- scale искажает изображение, чтобы оно соответствовало заданному размеру
- fill сохраняет весь кадр целиком и заполняет оставшуюся часть заданного размера чёрным фоном

Сценарий использования 2: установка метки времени миниатюры по умолчанию через API

По умолчанию Stream Player использует в качестве миниатюры первый кадр видео. Это можно изменить для отдельного видео, задав значение "thumbnailTimestampPct" через API:

curl -X POST \
-H "Authorization: Bearer <API_TOKEN>" \
-d '{"thumbnailTimestampPct": 0.5}' \
https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/stream/<VIDEO_UID>

thumbnailTimestampPct это значение от 0.0 (первый кадр видео) до 1.0 (последний кадр видео). Например, если вы хотите, чтобы миниатюра соответствовала кадру на середине видео, можно задать thumbnailTimestampPct значение равным 0.5. Использование относительных значений таким образом позволяет задать миниатюру по умолчанию, даже если продолжительность ваших видео или видео ваших пользователей различается.

Сценарий использования 3: создание анимированных миниатюр

Stream поддерживает анимированные GIF в качестве миниатюр. Просмотр анимированных миниатюр не учитывается в оплачиваемых минутах доставки или в просмотренных минутах в Stream Analytics.

Анимированные GIF-миниатюры

https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.gif?time=1s&height=200&duration=4s

Пример анимированного GIF, сгенерированного по запросу через Cloudflare Stream

Поддерживаемые атрибуты URL для анимированных миниатюр:

time (по умолчанию 0s) видео, например 8m, 5m2s
height (по умолчанию 640)
width (по умолчанию 640)
fit (по умолчанию crop) чтобы уточнить, как поступать, если запрошенные высота и ширина не совпадают с исходной загрузкой; значение должно быть одним из:
- crop обрезает части видео, которые не помещаются в заданный размер
- clip сохраняет весь кадр целиком и уменьшает размер изображения в пределах заданного размера
- scale искажает изображение, чтобы оно соответствовало заданному размеру
- fill сохраняет весь кадр целиком и заполняет оставшуюся часть заданного размера чёрным фоном
duration (по умолчанию 5s)
fps (по умолчанию 8)