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.
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'}, child_url)
postMessage({'command': 'pause'}, child_url)
postMessage({'command': 'toggle_loop'}, child_url)
SetCurrentTime is sent with params:
postMessage({'command': 'set_offset','offset': 123}, child_url)
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'}, child_url)
<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> // child_url is the actual domain of the player, which can be different from the src url for the iFrame, if redirects exist var child_url = "https://media.dlib.indiana.edu" // 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,child_url); } // 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]