← Cloudflare Stream / stream / uploading-videos

Player API

Атрибуты добавляются в <stream> тег без кавычек, как показано ниже:

<stream attribute-added-here src="5d5bc37ffcf54c9b82e996823bffbb81"></stream>

Несколько атрибутов можно использовать вместе, указывая их один за другим, например:

<stream attribute-1 attribute-2 attribute-3 src="5d5bc37ffcf54c9b82e996823bffbb81"></stream>

• autoplay boolean

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

• controls boolean

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

• height целое число

  • Высота области отображения видео в CSS-пикселях.

• loop boolean

  • Булев атрибут: если он указан в HTML-теге, плеер автоматически перематывает видео к началу по достижении конца.

• muted boolean

  • Булев атрибут, задающий исходное состояние звука видео. Если он установлен, звук изначально будет отключен.

• preload string | null

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

• poster строка

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

• src строка

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

• width целое число

  • Ширина области отображения видео в пикселях CSS.

• play() Promise

  • Запуск воспроизведения видео.

• pause() null

  • Приостановить воспроизведение видео.

• autoplay

  • Задаёт или возвращает, установлен ли атрибут autoplay, разрешающий автоматический запуск воспроизведения видео при загрузке.

• controls

  • Задаёт или возвращает, должны ли отображаться элементы управления видео (воспроизведение/пауза и другие)

• currentTime

  • Возвращает текущее время воспроизведения в секундах. При изменении этого значения видео перематывается на новое время.

• duration только для чтения

  • Возвращает длительность видео в секундах.

• ended только для чтения

  • Возвращает информацию о том, закончилось ли видео.

• loop

  • Задаёт или возвращает, должно ли видео начинаться заново по достижении конца

• muted

  • Задаёт или возвращает, должен ли звук воспроизводиться вместе с видео

• paused только для чтения

  • Возвращает информацию о том, приостановлено ли видео

• preload

  • Задаёт или возвращает, должно ли видео предзагружаться при загрузке элемента.

• volume

  • Задаёт или возвращает громкость в диапазоне от 0.0 (без звука) до 1.0 (максимальное значение)

Stream поддерживает большинство стандартизированные события медиаэлементов ↗.

• abort

  • Отправляется при прерывании воспроизведения: например, если воспроизведение медиафайла запускается заново с начала.

• canplay

  • Отправляется, когда доступно достаточно данных для воспроизведения хотя бы нескольких кадров.

• canplaythrough

  • Отправляется, когда весь медиафайл может быть воспроизведён без прерываний при условии, что скорость загрузки останется не ниже текущей. Событие также срабатывает при переключении между паузой и воспроизведением. Обратите внимание: в Firefox ручная установка currentTime в итоге вызывает событие canplaythrough. В других браузерах это событие может не срабатывать.

• durationchange

  • Метаданные загружены или изменены, что указывает на изменение длительности медиафайла. Например, это событие отправляется, когда медиафайл загружен настолько, что становится известна его длительность.

• ended

  • Отправляется по завершении воспроизведения.

• error

  • Отправляется при возникновении ошибки (например, если кодирование видео ещё не завершено или видео не загружается из-за некорректного подписанного URL-адреса)

• loadeddata

  • Загрузка первого кадра медиафайла завершена.

• loadedmetadata

  • Загрузка метаданных медиафайла завершена: все атрибуты содержат теперь весь доступный объём полезной информации.

• loadstart

  • Отправляется в начале загрузки медиафайла.

• pause

  • Отправляется при переходе воспроизведения в состояние паузы (свойство paused становится true).

• play

  • Отправляется, когда воспроизведение выходит из состояния паузы в результате вызова метода play или срабатывания атрибута autoplay.

• playing

  • Отправляется, когда у медиафайла достаточно данных для начала воспроизведения: после события play, при восстановлении после остановки (stalled), при перезапуске зацикленного медиафайла, а также после события seeked, если воспроизведение шло до перемотки.

• progress

  • Отправляется периодически, чтобы уведомлять заинтересованные стороны о ходе загрузки медиафайла. Информация о том, какая часть медиафайла уже загружена, доступна в атрибуте buffered элемента media.

• ratechange

  • Отправляется при изменении скорости воспроизведения.

• seeked

  • Отправляется по завершении операции перемотки.

• seeking

  • Отправляется в начале операции перемотки.

• stalled

  • Отправляется, когда user agent пытается получить данные медиафайла, но данные неожиданно не поступают.

• suspend

  • Отправляется при приостановке загрузки медиафайла: это может произойти из-за завершения загрузки или по любой другой причине паузы.

• timeupdate

  • Изменилось время, указанное в атрибуте currentTime элемента.

• volumechange

  • Отправляется при изменении громкости звука (как при установке уровня громкости, так и при изменении атрибута muted).

• waiting

  • Отправляется, когда запрошенная операция (например, воспроизведение) откладывается до завершения другой операции (например, перемотки).

Имена нестандартных событий начинаются с префикса stream- чтобы отличать их от стандартных событий.

• stream-adstart

  • Срабатывает, когда ad-url атрибут присутствует и реклама начинает воспроизводиться

• stream-adend

  • Срабатывает, когда ad-url атрибут присутствует и реклама завершает воспроизведение

• stream-adtimeout

  • Срабатывает, когда ad-url атрибут присутствует, а реклама загружалась слишком долго.