Playback Control
This guide provides instructions on how to control the playback of a BlendVision One iframe player, allowing for interaction between the player and your website.
Step 1: Define a Unique ID in the iframe Code
Include id=”IFRAME_ID”
in your iframe code, replacing IFRAME_ID
with a unique id of your choice.
<iframe id="IFRAME_ID" src="https://showroom.one.blendvision.com/embed?token={token}" width="640" height="360" allow="autoplay; encrypted-media; clipboard-write" frameborder="0" allowfullscreen></iframe>
<script>
window.addEventListener('message', event => {
if (event.data.command === 'ping') {
Array.from(document.querySelectorAll('iframe')).forEach(iframe =>
iframe?.contentWindow?.postMessage({ command: 'pong' }, '*')
);
}
});
</script>
Step 2: Control Playback Using Post Message
Utilize the following post message commands to control your iframe player.
Play
const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')
bvOnePage.contentWindow.postMessage(
JSON.stringify({event: 'command', func: 'play', args: []}),
'*'
)
Pause
const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')
bvOnePage.contentWindow.postMessage(
JSON.stringify({event: 'command', func: 'pause', args: []}),
'*'
)
Seek to a Target Time
Pass the target time in seconds to the args:[]
const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')
bvOnePage.contentWindow.postMessage(
JSON.stringify({event: 'command', func: 'seek', args: [12]}), // seek to 12sec.
'*'
)