Player API

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.

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).
  • 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 for iframe (it works in case of method=='event').
    • It can be: window.onfocus, window.onblur

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 seconds).
  • 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 - Full screen mode.

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

        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>
    <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.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'play', data: ''}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'pause', data: ''}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'seek', data: '10'}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'mute', data: ''}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'unmute', data: ''}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'volume', data: '50'}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'useLastTime', data: ''}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'previous', data: ''}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'next', data: ''}, '*');
frame.contentDocument.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'fullScreen', data: ''}, '*');