API плеера

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

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

loaded - Фрейм плеера загружен и готов принимать вызовы действий, которые описаны ниже.
play - Начинается воспроизведение.
pause - Пользователь поставил воспроизведение на паузу.
stop - Закончилось воспроизведение видео ролика.
time - Периодическое событие, которое передает текущее время воспроизведения.
event - JavaScript событие.
fullScreen - Режим полного экрана переключился.
- В ссылке на видео возможно передать параметр use_fullscreen_mode=0, чтобы отключить режим перехода в Полный экран (работает только отправка событий и переключение состояния кнопки Полного экрана). Пример https://play.boomstream.com/VCcNtuiw?use_fullscreen_mode=0

Интеграция

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

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

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

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

method - Название события (loaded, play, pause, stop, time, event).
code - Код видео файла.
time - Текущее время воспроизведения. Доступно для событий: loaded, play, pause, stop, time.
duration - Продолжительность видео ролика. Доступно для событий: loaded, play, pause, stop, time.

event - Тип JavaScript события внутри ифрейма (отправляется в случае method: 'event', 'fullScreen').
- возможные значения поля event для method == 'event': window.onfocus, window.onblur
- возможные значения поля event для method == 'fullScreen': requestFullscreen, exitFullscreen

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

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

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

Интеграция

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Example of player in frame</title>
        <style>
            .embed-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .embed-container {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                max-width: 100%;
            }
        </style>
        <script src="https://play.boomstream.com/assets/javascripts/biframesdk.js"></script>
    </head>
    <body>
    <script>

        let player = new bIframeSDK('ВАШ_КОД_МЕДИА');
        let seekTime = 10; //value is in percents

        window.addEventListener('message', receiveMessage, false);

        function receiveMessage(event) {

            if (event.data && event.data.method == 'loaded' && event.data.code == 'ВАШ_КОД_МЕДИА') {

                console.log(event);

                if (seekTime > event.data.time && event.data.duration) {
                    let seek = seekTime * 100 / event.data.duration; // Seek value is in percents
                    player.mute(); // Onloaded start is allowed only with sound muted.
                    player.seek(seek);
                }
            }
        }

    </script>
    <button onclick="player.play()">play</button>
    <button onclick="player.pause()">pause</button>
    <button onclick="player.seek(10)">seek to 10 %</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>
    <button onclick="player.toggleFullScreenButtonState()">toggleFullScreenButtonState</button>
    <div style="margin-right: auto;margin-left: auto;width:900px;">
        <div class="embed-container">
            <iframe width="100%" height="355" src="https://play.boomstream.com/ВАШ_КОД_МЕДИА" frameborder="0" scrolling="no" allow="autoplay; fullscreen" name="target"></iframe>
        </div>
    </div>
    </body>
</html>

Демонстрация примера доступна по ссылке: https://play.boomstream.com/test/frame.html

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

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

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

frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'toggleFullScreenButtonState', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'toggleFullScreenButtonState', data: 'exitFullscreen'}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'toggleFullScreenButtonState', data: 'requestFullscreen'}, '*');