Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

This feature is in development and is not yet released. It will be included in the next point releases of Avalon versions 5 and 6.

 

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

...

Code Block
languagejs
titleExample 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]
Note
titleAutoplaying 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.