...
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 | ||||
|---|---|---|---|---|
| ||||
<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> // childtarget_urldomain is the actual domain of the player, which can be different from the src url for the iFrame, if redirects exist var childtarget_urldomain = "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,childtarget_urldomain); } // 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] |