Player iframe API

The player can be controlled when it is embedded in another site using its iframe API (based on the JavaScript “postMessage” feature).

To send a command to the player, a message should be sent to the iframe.

Allowed messages:

theiframe.postMessage('play', '*');
theiframe.postMessage('pause', '*');
theiframe.postMessage('stop', '*');
theiframe.postMessage('mute', '*');
theiframe.postMessage('unmute', '*');
theiframe.postMessage({'seek': 0}, '*');  // time in seconds

Example of code:

// Get the first iframe of the page, use another function if there are more than one iframe in your page.
var iframe = document.querySelector('iframe');

// Mute the player.
iframe.postMessage('mute', '*');
// Start playing (can be blocked by the browser if no user action is linked to this JavaScript code).
iframe.postMessage('play', '*');

To get the status of the player (playing, paused, buffering, …), current time and video duration, you can listen to the following messages:

{ state: <player state> }
{ time: <player time in seconds (float)> }
{ duration: <player video duration in seconds (float)> }

Example of code:

window.addEventListener('message', function(event) {
    // Check that the message comes from the player iframe.
    if (event.origin !== 'https://your.mediaserver.tv') {
        return;
    }
    // Handle event data.
    if ('time' in event.data) {
        console.log('New player time:', event.data.time);
    } else if ('state' in event.data) {
        console.log('New player state:', event.data.state);
    } else if ('duration' in event.data) {
        console.log('New player duration:', event.data.duration);
    }
}, false);