API плеера

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

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

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

  • loaded - Фрейм плеера загружен и готов принимать вызовы действий, которые описаны ниже.
  • 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 - Название события (loaded, play, pause, stop, time, event).
  • code - Код видео файла.
  • time - Текущее время воспроизведения. Доступно для событий: loaded, play, pause, stop, time.
  • duration - Продолжительность видео ролика. Доступно для событий: loaded, play, pause, stop, 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 код:

<!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; //sek

        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>
    <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.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: ''}, '*');