Video Player
Iframe API
The Mediaflow video player supports integration via an iframe-based API. You can control the player and pass configuration using URL parameters and postMessage events. This page outlines the available GET parameters, supported message types, and how to use them to interact with the player from your parent page.
postMessage Events
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. |
For a full list of available options, see Options.
Example
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);