Playback Control

This guide provides instructions on how to control the playback of BlendVision iframe player, enabling 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 array.

const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')

bvOnePage.contentWindow.postMessage(
 JSON.stringify({event: 'command', func: 'seek', args: [12]}), // seek to 12sec.
 '*'
)

Set Volume

Pass the volume level from 0 to 1 with two decimal places (e.g. 0.35 for 35% volume) to the args array.

const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')

bvOnePage.contentWindow.postMessage(
 JSON.stringify({event: 'command', func: 'set-volume', args: [1]}), // set to the maximum volume
 '*'
)

Speed Up

const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')

bvOnePage.contentWindow.postMessage(
 JSON.stringify({event: 'command', func: 'speed-up', args: []}),
 '*'
)

Slow Down

const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')

bvOnePage.contentWindow.postMessage(
 JSON.stringify({event: 'command', func: 'slow-down', args: []}),
 '*'
)

Set Speed

Pass the following volume levels to the args array: 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2

const bvOnePage = docuement.querySelector('iframe#IFRAME_ID')

bvOnePage.contentWindow.postMessage(
 JSON.stringify({event: 'command', func: 'set-speed', args: [0.25]}),
 '*'
)