events
События плеера
Boomstream Player генерирует события, которые вы можете перехватывать на странице с помощью JavaScript. Плеер генерирует следующие события:
- loaded — iframe плеера загружен и готов к получению действий.
- play — когда плеер начинает воспроизведение видео.
- pause — когда пользователь ставит видео на паузу.
- stop — когда плеер заканчивает воспроизведение видео.
- time — периодическое событие, отправляющее текущую позицию видео.
- event — JavaScript-событие.
- progress — когда пользователь или плеер изменяет точку на шкале прогресса.
- fullScreen — когда изменяется полноэкранный режим.
Примечание: Вы можете передать параметр
use_fullscreen_mode=0, чтобы отключить вход в полноэкранный режим (работают только события и переключение кнопки). Пример:https://play.boomstream.com/VCcNtuiw?use_fullscreen_mode=0
Интеграция
Добавьте следующий JavaScript-код на страницу, где находится Boomstream Player:
JavaScript
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).
- 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 равно 'event', может быть:
calls
Вызовы действий
Существует система обмена сообщениями JavaScript API (postMessage) для управления плеером Boomstream вне iframe (для использования внешних кнопок на сайте). Действия, которые можно передать в плеер:
- play — начать воспроизведение.
- pause — поставить на паузу.
- seek — перейти к указанному моменту времени (время указывается в процентах %).
- mute — отключить звук.
- unmute — включить звук.
- volume — установить громкость (громкость указывается в процентах).
- useLastTime — начать воспроизведение с последнего времени.
- previous — переключиться на предыдущее видео в плейлисте.
- next — переключиться на следующее видео в плейлисте.
- fullScreen — переключить полноэкранный режим.
- toggleFullScreenButtonState — переключить состояние кнопки полноэкранного режима без самого действия (варианты значения: 'requestFullscreen', 'exitFullscreen').
Интеграция
Используйте этот HTML-код для отправки действий в плеер:
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"></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>
<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). Примеры:
JavaScript
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'}, '*');