Page Comparison

...

Avalon

...

Avalon Media System provides a simple API interface to allow cross-domain control of a media player embedded in an iframe.

...

postMessage({'command': 'play'}, childtarget_urldomain)

postMessage({'command': 'pause'}, childtarget_urldomain)

postMessage({'command': 'toggle_loop'}, childtarget_urldomain)

SetCurrentTime is sent with params:

postMessage({'command': 'set_offset','offset': 123}, childtarget_urldomain)

GetCurrentTime is sent with no parameters, but requires that a listener be available to hear the server's response, which will look like: data:{'command':'currentTime','currentTime':123}

postMessage({'command': 'get_offset'}, childtarget_url)

...

domain)

Note: target_domain must be the actual domain of the server from which the Player API is being served. If redirects or permalinks are in place, this might be different from the src of the embedded iframe.

Code Block

language	js
title	Example API Client

<iframe id="player_iframe" title="Wildlife" src="//www.example.com/master_files/g445cd121/embed" width="600" height="50" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 
<script>
 
  // target_domain is the actual domain of the player, which can be different from the src url for the iFrame, if redirects exist
  var target_domain = "https://media.example.com"

  // Send commands to the server
  function send_command(c, params){
    var f = $('#player_iframe');
    var command = params || {};
    command['command']=c;
    f.prop('contentWindow').postMessage(command,f.prop('src')target_domain);
  }
 
  // Receive commands from the server
  window.addEventListener('message', function(event) {
    var command = event.data.command;
    if (command=='currentTime') $('#set_offset').val(event.data.currentTime);
  });

</script>
<button onClick="send_command('play')">Play</button>
<button onClick="send_command('pause')">Pause</button>
<button onClick="send_command('toggle_loop')">Toggle Loop</button>
<button onClick="send_command('get_offset')">Get Offset</button>
<button onClick="send_command('set_offset',{'offset':$('#set_offset').val()})">Set Offset</button> 
<input type='text' id='set_offset' size='5'/> [seconds]

Note

title	Autoplaying Avalon Embeds Using the API

Autoplaying an embedded player will not work in some cases and requires a user to initiate playback. See https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ for more details.

Versions Compared

Old Version 7

New Version Current

Key