iFrame Player

Control the Playback of iFrame Player

This guide provides instructions on how to control the playback of a BlendVision One iframe player, allowing for seamless interaction between the player and your website.

Before We Start

Before proceeding, ensure that you have prepared your BlendVision One streaming iframe. The following guides will assist you in preparing your iframe:

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

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.

 '*'

)

 

Play

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

bvOnePage.contentWindow.postMessage(

 JSON.stringify({event: 'command', func: 'play', args: []}),

 '*'

)

 

What’s More

To track the playback, refer to the documentation provided here.

Updated