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: '2.13.0', player_id: false, event: 'ready' } | Fires when the player is ready. |
loadedmetadata | ✓ | - | { context: 'mediaflowplayer', version: '2.13.0', player_id: false, event: 'loadedmetadata' } | Fires when video metadata has loaded. |
play | ✓ | - | { context: 'mediaflowplayer', version: '2.13.0', player_id: false, event: 'play' } | Fires every time the video starts playing. |
pause | ✓ | - | { context: 'mediaflowplayer', version: '2.13.0', player_id: false, event: 'pause' } | Fires every time the video pauses. |
playvideo | - | ✓ | { context: 'mediaflowplayer', version: '2.13.0', player_id: false, event: 'playvideo' } | Send to iframe to start the video. |
pausevideo | - | ✓ | { context: 'mediaflowplayer', version: '2.13.0', player_id: false, event: 'pausevideo' } | Send to iframe to play the video. |
ended | ✓ | - | { context: 'mediaflowplayer', version: '2.13.0', player_id: false, event: 'ended' } | Fires when the video has finished completely. |
getPosition | ✓ | - | { context: 'mediaflowplayer', version: '2.13.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: '2.13.0', player_id: false, event: 'setPosition', value: 8.2142 } | Sets the position of the video. |
timeupdate | ✓ | - | { context: 'mediaflowplayer', version: '2.13.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. |
displayLanguage | A display language code | Sets the player UI language, overriding the viewer's browser language. Accepts the same values as the displayLanguage player option. |
defaultSubtitle | A 2-letter language code | Enables the subtitle or caption track in this language. |
defaultSubtitleKind | subtitles or captions | Which kind of track defaultSubtitle should select. Defaults to subtitles. |
For a full list of available options, see Options.
https://play.mediaflow.com/ovp/17/62ATHDY1C3?playerId=myUniquePlayer&timeupdate&displayLanguage=no
Because these parameters are read from the URL, a shared player link can be locked to a language without any JavaScript — useful when the video is embedded on a page whose language differs from the viewer's browser setting.
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);