Player events | Action calls

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.
fullScreen - When fullscreen mode is changed.
- you can pass parameter use_fullscreen_mode=0 to disable the full screen mode entering (it works just events and the button switching). Example is https://play.boomstream.com/VCcNtuiw?use_fullscreen_mode=0

Integration

You should add next Javascript code to the page where Boomstream Player is located:

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).
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

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:

<!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 has contain parameter: allow="autoplay; fullscreen"

To send actions into the player you can use JavaScript API (postMessage), examples are:

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

Boomstream Player triggers events that you can catch on the page using Javascript. Player triggers next events: Play, Pause, Stop, Time.

Products

Solutions

Company

Resources