← Cloudflare Stream / stream / viewing-videos / using-the-stream-player

Stream Player API

Для более гибкого управления и настройки мы предоставляем дополнительный JavaScript SDK, с помощью которого можно управлять воспроизведением видео и отслеживать медиасобытия.

Чтобы использовать этот SDK, добавьте дополнительный <script> тег на ваш сайт:

<!-- You can use styles and CSS on this iframe element where the video player will appear -->
<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"
  id="stream-player"
></iframe>

<script src="https://embed.cloudflarestream.com/embed/sdk.latest.js"></script>

<!-- Your JavaScript code below-->
<script>
  const player = Stream(document.getElementById('stream-player'));
  player.addEventListener('play', () => {
    console.log('playing!');
  });
  player.play().catch(() => {
    console.log('playback failed, muting to try again');
    player.muted = true;
    player.play();
  });
</script>

• play() Promise

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

• pause() null

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

• autoplay boolean

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

• buffered TimeRanges readonly

  • Объект, соответствующий интерфейсу TimeRanges. Этот объект нормализован: диапазоны упорядочены, не пересекаются, не пусты и не соприкасаются друг с другом (соседние диапазоны объединяются в один более крупный).

• controls boolean

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

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

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

• defaultTextTrack

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

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

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

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

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

• letterboxColor строка

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

• loop boolean

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

• muted boolean

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

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

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

• played TimeRanges readonly

  • Объект, соответствующий интерфейсу TimeRanges. Этот объект нормализован: диапазоны упорядочены, не пересекаются, не пусты и не соприкасаются друг с другом (соседние диапазоны объединяются в один более крупный).

• preload boolean

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

• primaryColor строка

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

• volume float

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

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

• 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 атрибут присутствует, а реклама загружалась слишком долго.