Stream Monkey Client Player API

This API allows clients to interact with the player using JavaScript. It is currently broken down into two main categories:

  1. Take an action in the player

  2. Set up the player to notify when an event happens.

The interaction with the player iFrame is done through the Window.postMessage API.

Usage

To use events, there are three parts that must be done.

Setup Authorized domains

Before the player will respond to a message, you must add an authorized domain the player will be embedded on. Go to Account Settings > Organization > Advanced Settings, and add your full domain only to the authorized domains (include the protocol and subdomains, if applicable). For example, your domain may be https://live.something.com. You may also want to include http://live.something.com. Trailing slashes will automatically be removed.

Add event listener

Second, you need to add an Event Listener to your window, so that you can take action with the responses from the iFrame. Make sure to check the origin of the event when you receive it.

window.addEventListener('message', function(event) {    if (event.origin === 'https://player.streammonkey.com') {        var response = event.data;        // Do something with the response    } else {        // Not from Stream Monkey! No need to do anything.    }});

Send a message to the player

To post a message to the player, grab the frame by the ID of your iFrame element, and post the message to it.

var player = document.getElementById('streamMonkeyPlayer');player.contentWindow.postMessage('player.currentTime', '*');

Available Actions

Currently, there are two types of actions available. The first type requests information, and the player will send a message back right away, with the requested information. The available actions are:

player.currentTime

Requests the current time in the player, to the nearest whole number. Returns:

{    'type': 'playerInfo',    'info': 'currentTime',    'value': number}

player.isFullscreen

Requests if the player is currently fullscreen. Returns a boolean value. Return format:

{    'type': 'playerInfo',    'info': 'isFullscreen',    'value': boolean}

player.isCasting

Requests if the player is currently casting. Returns a boolean value. Return format:

{    'type': 'playerInfo',    'info': 'isCasting',    'value': boolean}

The second type of actions available are those which do not immediately send a response back, but rather wait for an event to happen, and then send a message. The available actions for events are:

player.notifyOnFullscreenChange

Sends a message when the view mode is changed to or from Fullscreen. Returns a boolean value. Return format:

{    'type': 'playerEvent',    'info': 'isFullscreen',    'value': boolean}

player.notifyOnCast

Sends a message when the view mode is changed to or from Fullscreen. Returns true, because this only sends a message when casting begins. Return format:

{    'type': 'playerEvent',    'info': 'castStarted',    'value': true}

Note: Make sure the messages you are sending to the iFrame are only sent once the iFrame is loaded. A good way to do this is to have a function that runs on an onload event for the iFrame.
If you attempt to post a message to the iFrame before it is fully loaded, your message will fail.

Did this answer your question?