Skip to main content

Detecting player events

What is a callback#

A callback is a function you can assign and our player calls that function when some event happens. So we call code that you can define yourself, making the system super flexible.

There are multiple player callbacks available in the new Privacy Player Pro

Privacy Player Pro available callbacks#

player.ready_callback#

Easily one of the most useful of these callbacks is the player.ready_callback

player.ready_callback = function () {
player.control_bar.hide()
}

In this example the control bar is hidden when the player is ready, with this callback you can easily start your program the moment the player is ready, no need for risky timers of inefficient "while true" loops.

player.play_callback#

This callback will be called when the player starting

player.play_callback = function () {
// Enable the station logo when the user plays the video
player.enableStationLogo(image, width_percentage = 25, opacity = 1)
}

In this example whenever the player starts playing we enable the station logo.

25 is the percentage of the width, and 1 is the opacity.

player.pause_callback#

This callback is the opposite of the previous callback, it is called when the player is paused.

player.pause_callback = function () {
// Hide the station logo when the user plays the video
player.disableStationLogo()
}

In this example whenever the player is paused we disable the station logo.

player.position_callback#

This callback will sent you the current position of the player in the content.

player.position_callback = function (position) {
let position_percentage = ((position / duration) * 100)
console.log("Movie progress: " + position_percentage + "%")
}

player.volume_update_callback#

When the volume of the player is changed this callback will be called

player.volume_update_callback = function (volume) {
console.log("Volume set to: " + volume + "%")
}

player.metadata_callback#

This callback will give you the metadata of the content

player.metadata_callback = function (data) {
console.log("Meta data available: ", data)
}

Player events (old method)#

note

In previous versions of our player we had a system of messages posted to the parent window. This system is still intact, but it is advised to migrate to the callback system.

It is possible to read out the meta data from the iFrame player through javascript. Normally it is not possible to transfer data from two different domains. Therefore some small steps are needed on in order to get the meta data from the iFrame player to the main page where the player is embedded. This is done by using the window.postMessage() command

First of all, add the query string parameter events=1 to the iFrame player url. This will enable the pass through code for passing through the player events

<iframe src="http://rrr.streamzilla.xlcdn.com/?account=Account&file=kenblock_multi.smil&type=streaming&service=wowza&output=player" width="854" height="480" frameborder="0" seamless allowfullscreen="true" webkitAllowFullScreen="true"></iframe>

Would become

<iframe src="http://rrr.streamzilla.xlcdn.com/?account=Account&file=kenblock_multi.smil&type=streaming&service=wowza&output=player&events=1" width="854" height="480" frameborder="0" seamless allowfullscreen="true" webkitAllowFullScreen="true"></iframe>

Second there is a small piece of javascript code needed in the page where the iFrame player is embedded:

<script type="text/javascript">
window.addEventListener('message', function(event) {
// Only accept messeges from the iFrame player domain
if (event.origin.indexOf('rrr.sz.xlcdn.com') == -1) {
return;
}
if (event.data.event == 'timeupdate') {
console.log('Got event: ' + event.data.event + ' at time position: ' + event.data.data + ' seconds');
} else {
console.log('Got event: ' + event.data.event + ' with data: ' + JSON.stringify(event.data.data));
}
});
</script>

The following events are available with data:

eventdata
aborttrue
canplaytrue
canplaythroughtrue
durationchangenew duration in seconds
emptiedtrue
endedtrue
errortrue
loadeddataamount of buffer data in percentage
loadedmetadataObject with duration, height, width, levels variables
loadstarttrue
pausetrue
playtrue
playingtrue
progressObject with start and end which holds the buffer start and end position
ratechangethe new playback rate
seekedtrue
seekingtrue
stalledtrue
suspendtrue
timeupdatethe new/current position in seconds
volumechangethe new/current volume
waitingtrue