🎮

Player API

Для использования с AI / LLM

Методы: events | calls

events

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

Boomstream Player генерирует события, которые вы можете перехватывать на странице с помощью JavaScript. Плеер генерирует следующие события:

loaded — iframe плеера загружен и готов к получению действий.
play — когда плеер начинает воспроизведение видео.
pause — когда пользователь ставит видео на паузу.
stop — когда плеер заканчивает воспроизведение видео.
time — периодическое событие, отправляющее текущую позицию видео.
event — JavaScript-событие.
progress — когда пользователь или плеер изменяет точку на шкале прогресса.
fullScreen — когда изменяется полноэкранный режим.
playbackRate — когда изменяется скорость воспроизведения.
qualities — когда готов или обновился список доступных качеств.
quality — когда выбрано качество.
theme — когда изменяется тема плеера.

Примечание: Вы можете передать параметр use_fullscreen_mode=0, чтобы отключить вход в полноэкранный режим (работают только события и переключение кнопки). Пример: https://play.boomstream.com/VCcNtuiw?use_fullscreen_mode=0

Интеграция

Добавьте следующий JavaScript-код на страницу, где находится Boomstream Player:

window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
  if (event.origin !== "https://play.boomstream.com") {
    return;
  }
  // Ваш код здесь
}

Данные события будут находиться в объекте event в поле data.

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

method — имя события (loaded, play, pause, stop, time, event, fullScreen, progress, playbackRate, qualities, quality, theme).
code — код видео.
time — текущая позиция видео. Доступно для событий: loaded, play, pause, stop, time.
duration — длительность видео. Доступно для событий: loaded, play, pause, stop, time.
event — тип JavaScript-события из iframe (работает, когда method равно 'event' или 'fullScreen').
- Если method равно 'event', может быть: window.onfocus, window.onblur
- Если method равно 'fullScreen', может быть: requestFullscreen, exitFullscreen
- Если method равно 'progress', может быть: change
- Если method равно 'playbackRate' — скорость воспроизведения, число: 0.5, 1, 1.5 и т. д.
- Если method равно 'qualities' — массив доступных качеств (высота кадра по убыванию), например [1080, 720, 360]
- Если method равно 'quality' — выбранное качество: высота кадра (например 720) или 'auto'
- Если method равно 'theme' — тема плеера: light, dark или device

calls

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

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

play — начать воспроизведение.
pause — поставить на паузу.
seek — перейти к указанному моменту времени (время указывается в процентах %).
mute — отключить звук.
unmute — включить звук.
volume — установить громкость (громкость указывается в процентах).
useLastTime — начать воспроизведение с последнего времени.
previous — переключиться на предыдущее видео в плейлисте.
next — переключиться на следующее видео в плейлисте.
fullScreen — переключить полноэкранный режим.
toggleFullScreenButtonState — переключить состояние кнопки полноэкранного режима без самого действия (варианты значения: 'requestFullscreen', 'exitFullscreen').
playbackRate — установить скорость воспроизведения: число от 0.5 до 2. На трансляциях скорость не меняется.
quality — выбрать качество: 'auto' (автоматически) или высота кадра из события qualities, например 720 или '720p'. Если такого качества нет, действие игнорируется.
theme — установить тему плеера: 'light' (светлая), 'dark' (тёмная) или 'device' (как в системе устройства).

Примечание: действия и события playbackRate, quality, qualities и theme поддерживаются плеером v2; методы SDK player.playbackRate(), player.quality(), player.theme() — с версии SDK 1.5.0. Выбранные скорость, качество и тема запоминаются в браузере зрителя, как при выборе в меню плеера.

Интеграция

Используйте этот HTML-код для отправки действий в плеер:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Пример плеера во фрейме</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?v=1.5.0"></script>
    </head>
    <body>
    <script>

        let player = new bIframeSDK('MEDIA_CODE');
        let seekTime = 10; // значение в процентах

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

        function receiveMessage(event) {

            if (event.data && event.data.method == 'loaded' && event.data.code == 'MEDIA_CODE') {

                console.log(event);

                if (seekTime > event.data.time && event.data.duration) {
                    let seek = seekTime * 100 / event.data.duration; // Значение seek в процентах
                    player.mute(); // При старте по загрузке разрешено только с выключенным звуком
                    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>
    <button onclick="player.playbackRate(1.5)">speed 1.5x</button>
    <button onclick="player.quality(720)">quality 720p</button>
    <button onclick="player.quality('auto')">quality auto</button>
    <button onclick="player.theme('dark')">dark theme</button>
    <button onclick="player.theme('light')">light theme</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/MEDIA_CODE" frameborder="0" scrolling="no" allow="autoplay; fullscreen" name="target"></iframe>
        </div>
    </div>
    </body>
</html>

Вы можете попробовать демо по ссылке: https://play.boomstream.com/test/frame.html

Важно: Код iframe должен содержать параметр: allow="autoplay; fullscreen"

Для отправки действий в плеер вы можете использовать JavaScript API (postMessage). Примеры:

let frame = document.querySelector("iframe");
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'play', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'pause', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'seek', data: '10'}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'mute', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'unmute', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'volume', data: '50'}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'useLastTime', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'previous', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'next', data: ''}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_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'}, '*');

frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'playbackRate', data: 1.5}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'quality', data: 720}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'quality', data: 'auto'}, '*');
frame.contentWindow.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'theme', data: 'dark'}, '*');

Список доступных качеств плеер присылает событием qualities — по нему можно построить своё меню качества:

window.addEventListener('message', function (event) {
  if (event.origin !== "https://play.boomstream.com" || !event.data) {
    return;
  }
  if (event.data.method === 'qualities') {
    console.log('Доступные качества:', event.data.event); // например [1080, 720, 360]
  }
  if (event.data.method === 'quality') {
    console.log('Текущее качество:', event.data.event); // 720 или 'auto'
  }
});

Тема плеера по теме сайта

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

параметр ссылки theme: https://play.boomstream.com/MEDIA_CODE?theme=dark (light, dark или device);
в SDK (с версии 1.5.0) — атрибут data-boomstream-theme: auto — плеер становится светлым или тёмным в цвет страницы и переключается вместе с ней; light / dark — фиксированная тема; device — как в системе зрителя (для сайтов, тема которых следует системе):

<span data-boomstream-code="MEDIA_CODE" data-boomstream-theme="auto"></span>

Сайты с тёмной темой: если iframe плеера вставлен без SDK, передайте тёмную тему в ссылке (?theme=dark) или добавьте iframe style="color-scheme: light" (плеер останется светлым). Если тема сайта следует системе зрителя, передайте ?theme=device. Иначе браузер может показать тонкую белую полосу по краю плеера. SDK 1.5.0 делает это сам.