Iframe API

Messages

Messages are sent to the parent window by the player, automatically, unless otherwise specified in the description below. They all use the same object structure for consistency. The value key can be omitted for getters.

Event	Getter	Setter	Message	Description
ready	✓	-	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'ready' }	Fires when the player is ready.
loadedmetadata	✓	-	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'loadedmetadata' }	Fires when video metadata has loaded.
play	✓	-	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'play' }	Fires every time the video starts playing.
pause	✓	-	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'pause' }	Fires every time the video pauses.
playvideo	-	✓	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'playvideo' }	Send to iframe to start the video.
pausevideo	-	✓	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'pausevideo' }	Send to iframe to play the video.
ended	✓	-	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'ended' }	Fires when the video has finished completely.
getPosition	✓	-	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'getPosition', value: 12.4161 }	Posts a message to the parent with the current position (in seconds) as a float. Has to be manually triggered, by sending a message to the iframe. E.g. myiframe.postMessage({message: 'getPosition'}, '*');
setPosition	-	✓	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'setPosition', value: 8.2142 }	Sets the position of the video.
timeupdate	✓	-	{ context: 'mediaflowplayer', version: '1.8.0', player_id: false, event: 'timeupdate', value: 24.2146 }	Fires when the video position has changed/when the playhead moves. Note: Only fires if timeupdate is added as a GET parameter to the iframe source URL.

Options

Options can be passed to the iframe player using GET parameters.

Parameter	Value	Description
playerId	Your Player ID	Add your own ID to the player. This ID is included in all post messages with the key player_id. If the parameter is omitted, it defaults to false.
timeupdate	-	When the timeupdate parameter is added, the player will post a message every time the play head moves/current time changes.

Example

https://play.mediaflowpro.com/ovp/17/62ATHDY1C3?playerId=myUniquePlayer&timeupdate

const myiframe = document.getElementById('myvideo').contentWindow;

// Getter
myiframe.postMessage({ context: 'mediaflowplayer', event: 'getPosition' }, '*');

// Setter
myiframe.postMessage({ context: 'mediaflowplayer', event: 'setPosition', value: 8.4156 }, '*');

// Listen for messages that the iframed video player is sending
window.addEventListener('message', function (event) {
    if(event.data.context && event.data.context === 'mediaflowplayer') {
        if(event.data.event === 'play') {
            // Do your thing        
        }
    }
}, false);