...
Using this API, client webpages will be able to perform this limited set of operations on the player:
- Play
- Pause
- Get Toggle auto-replay (loop)
- Set Current Time (in seconds)Set
- Get Current Time (in seconds)
- Toggle auto-replay (loop)
Play, pause, and toggle auto-replay are sent without parameters:
postMessage({'command': 'play'})
postMessage({'command': 'pause'})
postMessage({'command': 'toggle_loop'})
SetCurrentTime is sent with params:
postMessage({'command':'set_offset','offset':123})
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'})
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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>
// 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'));
}
// 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] |