iFrame Player

Quickstart: Playback a Private BlendVision One Stream

Embedding a BlendVision One stream into your website is as simple as using the iframe embed code.

This guide will walk you through the steps to start a private (token-protected) BlendVision One streaming playback using the iframe player.

 

Before We Start

Before proceeding, ensure that you have prepared your BlendVision One streaming content. You can prepare your content in two ways:

 

Step 1: Obtain a Resource Token

  • Obtain a valid API token by following the authentication steps
  • Retrieve the resource_id and resource_type of the streaming content you would like to playback. There are two ways to obtain this information:

  • Obtain the resource token using the API: /bv/cms/v1/resources/tokens, with the resource_id and resource_type as body parameters.
    • You can also include customer_id in the body parameters if you want to track user playback with your own defined user ID
const resourceId = ''
const resourceType = ''

// response {token: '...'}
const {token: resourceToken} = await fetch(
  `https://api.one.blendvision.com/bv/cms/v1/resources/tokens`,
  {
    method: 'POST',
    body: JSON.stringify({
      resource_id: resourceId,
      resource_type: resourceType,
    }),
    headers: {
      Authorization: 'Bearer ${CMS token}' // TODO API key or generate
special tokens?
    }
  }
).then(res => res.json())

 

Step 2: Obtain the iFrame Code for BlendVision One Streaming Content

Replace {token} in the following iframe code with the valid resource token obtained in the previous step

<iframe 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 3: Embed the iFrame Player on Your Website

Embed the iframe code obtained in the previous step in the body of your HTML.

 

What’s More

To ensure a smooth playback experience, check the :

Updated