← Cloudflare Stream / stream / viewing-videos

Использование Stream Player

Cloudflare предоставляет настраиваемый веб-плеер, который воспроизводит видео по запросу и прямые трансляции и не требует дополнительной инженерной работы.

Чтобы добавить Stream Player на веб-страницу, можно либо:

• Создайте код для встраивания на Stream странице дашборда Cloudflare для конкретного видео или Live Input.

  Перейдите в Видео ↗

• Используйте пример кода ниже, заменив <VIDEO_UID> на UID видео (или подписанный токен) и <CODE> на ваш уникальный код клиента, который можно найти в Stream Dashboard.

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	style="border: none"
	height="720"
	width="1280"
	allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
	allowfullscreen="true"
></iframe>

Плеер Stream также доступен в виде React ↗ или Angular ↗ компонент.

• Chrome: версия 88 и выше
• Firefox: версия 87 и выше
• Edge: версия 89 или выше
• Safari: версия 14 или выше
• Opera: версия 75 и выше

• Chrome для Android: версия 90
• UC Browser на Android: версия 12.12 и выше
• Samsung Internet: версия 13 или выше
• Safari на iOS: версия 13.4 или выше (переключение скорости воспроизведения поддерживается вне полноэкранного режима)

Изменение height и width атрибуты у iframe изменит значения размеров iframe в пикселях, отображаемого на странице хоста.

<iframe
	src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
	style="border: none"
	height="400"
	width="400"
	allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
	allowfullscreen="true"
></iframe>

Чтобы сделать iframe адаптивным, нужно задать стили для фиксации соотношения сторон с помощью iframe к position: absolute; чтобы оно заполняло контейнер, использующий вычисленное padding-top процентов.

<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
<div style="position: relative; padding-top: 56.25%">
	<iframe
		src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
		style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
		allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
		allowfullscreen="true"
	></iframe>
</div>

Параметры плеера задаются query-параметрами в адресе iframe src атрибут. Например:

https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe?autoplay=true&muted=true

• autoplay по умолчанию: false

  • Если флаг autoplay передан как параметр строки запроса, плеер попытается воспроизвести видео автоматически. Если автовоспроизведение не нужно, просто не указывайте флаг autoplay вовсе (а не устанавливайте его в autoplay=false.) Учтите, что мобильные браузеры, как правило, не поддерживают этот атрибут: чтобы начать воспроизведение видео, пользователю нужно нажать на экран. Прежде чем использовать этот атрибут, учитывайте интересы пользователей мобильных устройств и тех, у кого ограничен доступ к интернету, поскольку не у всех есть безлимитный интернет.

• controls по умолчанию: true

  • Отображает элементы управления видео, такие как кнопки воспроизведения/паузы и регулировки громкости.

• defaultTextTrack

  • Инициализирует плеер с включённой текстовой дорожкой для указанного кода языка. Значением должен быть код языка BCP-47, использованный при загрузить текстовую дорожку. Если для указанного языкового кода нет доступных субтитров, плеер будет вести себя так, как если бы языковой код не был указан.

• letterboxColor

  • Любое допустимое значение CSS-цвета ↗ будет применено к леттербоксингу/пилларбоксингу интерфейса плеера. Это можно установить в transparent чтобы избежать леттербоксинга/пилларбоксинга, когда видео воспроизводится не в полноэкранном режиме.

• loop по умолчанию: false

  • Если эта функция включена, плеер автоматически возвращается к началу видео по достижении конца.

• muted по умолчанию: false

  • Если этот параметр включен, звук изначально будет отключен.

• preload по умолчанию: none

  • Этот перечислимый параметр подсказывает браузеру, какой вариант, по мнению автора, обеспечит наилучший пользовательский опыт. Вы можете задать значение preload="auto" чтобы предзагрузить начало видео. Если не указать параметр или использовать preload="metadata" загрузит только метаданные, необходимые для начала воспроизведения видео по запросу.

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

  • URL-адрес изображения, которое показывается до начала воспроизведения видео или пока оно загружается. Если этот атрибут не указан, отображается миниатюра видео.

• primaryColor

  • Любое допустимое значение CSS-цвета ↗ будет применено к определённым элементам интерфейса плеера.

• src

  • Здесь нужно указать идентификатор видео, загруженного в Cloudflare Stream.

• startTime

  • Временная метка, определяющая момент начала воспроизведения. Если указано простое число, например ?startTime=123, он будет интерпретирован как 123 секунд. Также можно использовать метки времени в более удобочитаемом формате, например ?startTime=1h12m27s для 1 hour, 12 minutes, and 27 seconds.

• ad-url

  • Stream Player поддерживает VAST Tags для вставки рекламы, например preroll-роликов. Если у вас есть VAST tag URI, вы можете передать его в Stream Player, указав ad-url параметр. URI необходимо закодировать с помощью функции, аналогичной JavaScript encodeURIComponent().

Меню Debug плеера Stream можно показать и скрыть с помощью комбинации клавиш Shift-D во время воспроизведения видео.

После завершения прямой трансляции запись создаётся автоматически и становится доступна в течение 60 секунд. Чтобы просмотр и воспроизведение видео прошли без проблем, учитывайте следующее:

• Если прямая трансляция завершается во время просмотра, зрителям следует подождать 60 секунд и перезагрузить плеер, чтобы посмотреть запись трансляции.
• После завершения прямой трансляции статус записи можно проверить через API. Когда состояние видео ready, вы можете использовать один из URL-адресов манифеста, чтобы транслировать запись.

Пока формируется запись прямой трансляции, статус видео может отображаться как not-found или not-started.

Если для Live Input включена бета-версия Low-Latency HLS, плеер Stream по возможности автоматически воспроизводит видео в режиме низкой задержки. См. Запуск прямой трансляции чтобы включить эту опцию.