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

Using this API, client webpages will be able to perform this limited set of operations on the player:

Play
Pause
Toggle auto-replay (loop)
Set Current Time (in seconds)
Get Current Time (in seconds)

Play, pause, and toggle auto-replay are sent from the parent window to the target child window without parameters:

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

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

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

SetCurrentTime is sent with params:

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

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'}, target_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.

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,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]

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.

Browser not supported