API плеера

События в плеере | Вызовы действий

События в плеере

Boomstream плеер генерирует события, которые можно отлавливать с помощью Javascript на странице, на которой размещен плеер. События, которые отправляет плеер:

  • play - Когда начинается воспроизведение.
  • pause - Когда пользователь поставил воспроизведение на паузу.
  • stop - Когда заканчивается воспроизведение.
  • time - Периодическое событие, которое передает текущее время воспроизведения.
  • event - JavaScript событие.

Интеграция

Чтобы отлавливать события, генерируемые плеером, нужно на страницу, на которой размещен плеер, добавить следующий Javascript код:

window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
  if (event.origin !== "https://play.boomstream.com") {
    return;
  }
  // Your code here
}

При этом в объекте event в поле data будет находится информация по событию.

Возможные свойства поля data:

  • method - Название события (play, pause, stop, time, event).
  • code - Код видео файла.
  • time - Текущее время воспроизведения (доступно только для события time).
  • event - Тип JavaScript события внутри ифрейма (отправляется в случае method=='event').
    • возможные значения для event: window.onfocus, window.onblur

Вызовы действий

Для управления Boomstream плеером из вне фрейма (например используя внешние кнопки управления на вашем сайте) предусмотрен механизм передачи сообщений по средствам Javascript API - postMessage. Действия, которые принимает плеер:

  • play - Начать воспроизведение.
  • pause - Поставить воспроизведение на паузу.
  • seek - Инициировать переход на момент времени (время передается в секундах).
  • mute - Отключить звук.
  • unmute - Включить звук.
  • volume - Установить громкость (громкость передается в процентах).
  • useLastTime - Начать воспроизведение с последнего момента.
  • previous - Начать воспроизведение с предыдущего ролика в плейлисте.
  • next - Начать воспроизведение со следующего ролика в плейлисте.
  • fullScreen - Развернуть/свернуть плеер на весь экран.

Интеграция

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

<script src="https://play.boomstream.com/assets/javascripts/biframesdk.js?v2"></script>
<script>
    let player = new bIframeSDK('ВАШ_КОД_МЕДИА');
</script>
<button onclick="player.play()">play</button>
<button onclick="player.pause()">pause</button>
<button onclick="player.seek(10)">seek to 10 sec</button>
<button onclick="player.mute()">mute</button>
<button onclick="player.unmute()">unmute</button>
<button onclick="player.volume(50)">volume to 50 %</button>
<button onclick="player.useLastTime()">useLastTime</button>
<button onclick="player.previous()">previous</button>
<button onclick="player.next()">next</button>
<button onclick="player.fullScreen()">fullScreen</button>
<iframe width="100%" height="355" src="https://play.boomstream.com/ВАШ_КОД_МЕДИА" frameborder="0" scrolling="no" allow="autoplay; fullscreen" allowfullscreen name="target"></iframe>

Важно, чтобы код фрейма содержал параметр: allow="autoplay; fullscreen"

Для передачи действий в плеер так же возможно использовать метод JavaScript API (postMessage) в следующем формате:

let frame = document.querySelector("iframe");
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'play', data: ''}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'pause', data: ''}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'seek', data: '10'}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'mute', data: ''}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'unmute', data: ''}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'volume', data: '50'}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'useLastTime', data: ''}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'previous', data: ''}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'next', data: ''}, '*');
frame.contentDocument.postMessage({code: 'ВАШ_КОД_МЕДИА', method: 'action', action: 'fullScreen', data: ''}, '*');