events
Player events
Boomstream Player triggers events that you can catch on the page using JavaScript. Player triggers the following events:
- loaded - Player's iframe is loaded and ready to get actions.
- play - When Player starts playing a video.
- pause - When user pauses a video.
- stop - When Player finishes playing a video.
- time - Periodical event which sends current video position.
- event - JavaScript event.
- progress - When user/player changes progress bar point.
- fullScreen - When fullscreen mode is changed.
Note: You can pass parameter
use_fullscreen_mode=0to disable the full screen mode entering (it works just events and the button switching). Example:https://play.boomstream.com/VCcNtuiw?use_fullscreen_mode=0
Integration
You should add the following JavaScript code to the page where Boomstream Player is located:
JavaScript
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
if (event.origin !== "https://play.boomstream.com") {
return;
}
// Your code here
}
Event data will be located in the event object in the data field.
Possible field properties:
- method - Event name (loaded, play, pause, stop, time, event, fullScreen, progress).
- code - Video code.
- time - Current video position. Allowed for events: loaded, play, pause, stop, time.
- duration - Duration of video. Allowed for events: loaded, play, pause, stop, time.
- event - JavaScript event type from iframe (it works in case of method is 'event' or 'fullScreen').
- In case of method is 'event', it can be:
window.onfocus,window.onblur - In case of method is 'fullScreen', it can be:
requestFullscreen,exitFullscreen - In case of method is 'progress', it can be:
change
- In case of method is 'event', it can be:
calls
Action calls
There is a messaging system JavaScript API (postMessage) to control Boomstream player outside of iframe (to use external buttons on the site). Actions you can pass into the player:
- play - Start playback.
- pause - Set pause.
- seek - Seek to a time moment (time is in percents %).
- mute - Disable sound.
- unmute - Enable sound.
- volume - Setup volume (volume is in percent).
- useLastTime - Start playback from a last time.
- previous - Set previous video in playlist.
- next - Set next video in playlist.
- fullScreen - Toggle full screen mode.
- toggleFullScreenButtonState - Toggle full screen button without full screen mode action (options for value: 'requestFullscreen', 'exitFullscreen').
Integration
Use this HTML code to send actions into the player:
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('MEDIA_CODE');
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 == 'MEDIA_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/MEDIA_CODE" frameborder="0" scrolling="no" allow="autoplay; fullscreen" name="target"></iframe>
</div>
</div>
</body>
</html>
You can try demo by link: https://play.boomstream.com/test/frame.html
Important: Iframe code must contain parameter:
allow="autoplay; fullscreen"
To send actions into the player you can use JavaScript API (postMessage). Examples:
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'}, '*');