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:

  • 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 (play, pause, stop, time, event).
  • code - Video code.
  • time - Current video position (only for time event).
  • 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:

<script src="https://play.boomstream.com/assets/javascripts/biframesdk.js"></script>
<script>
    let player = new bIframeSDK('MEDIA_CODE');
</script>
<button onclick="player.play()">play</button>
<button onclick="player.pause()">pause</button>
<button onclick="player.seek(10)">seek to 10 sec</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>
<iframe width="100%" height="355" src="https://play.boomstream.com/MEDIA_CODE" frameborder="0" scrolling="no" allowfullscreen name="target"></iframe>

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

window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'play', data: ''}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'pause', data: ''}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'seek', data: '10'}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'mute', data: ''}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'unmute', data: ''}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'volume', data: '50'}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'useLastTime', data: ''}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'previous', data: ''}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'next', data: ''}, '*');
window.frames.target.postMessage({code: 'MEDIA_CODE', method: 'action', action: 'fullScreen', data: ''}, '*');