iFrame Player

Quickstart : Playback a Public 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 public 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 the iFrame Code for BlendVision One Streaming Content

You can obtain the iframe code in two ways:

  • Copy from your BlendVision One console
    • VOD > Publishing Tools > iframe
    • Live > Publishing Tools > iframe

  • Obtain using the BlendVision One API
    • 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:
    • 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())
  • 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 2: 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