Embed Player into Website

You can embed BlendVision video/audio on demand (VOD/AOD) and livestreams into your website using the iframe player.

Use the following template to embed a video player on your website. The parameters to configure the iframe are described below.

HTML

<iframe
  src="https://showroom.one.blendvision.com/embed?token=resource_token&lang=en&t=0&shareUrl=example.com"
  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>

React

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    window.addEventListener('message', (event) => {
      if (event.data.command === 'ping') {
        Array.from(document.querySelectorAll('iframe')).forEach((iframe) =>
          iframe?.contentWindow?.postMessage({ command: 'pong' }, '*')
        )
      }
    })
  }, [])

  return (
    <div className='App'>
      <iframe
        src='https://showroom.one.blendvision.com/embed?token=resource_token&lang=en&t=0&shareUrl=example.com'
        width='640'
        height='360'
        allow='autoplay; encrypted-media; clipboard-write'
        frameborder='0'
        allowfullscreen
        title='iframe'
      />
    </div>
  )
}

export default App

Vue 3

<script setup>
window.addEventListener('message', event => {
  if (event.data.command === 'ping') {
    Array.from(document.querySelectorAll('iframe')).forEach(iframe =>
      iframe?.contentWindow?.postMessage({ command: 'pong' }, '*')
    );
  }
});
</script>

<template>
  <div id="app">
    <iframe
      src="https://showroom.one.blendvision.com/embed?token=resource_token&lang=en&t=0&shareUrl=example.com"
      width="640"
      height="360"
      allow="autoplay; encrypted-media; clipboard-write"
      frameborder="0"
      allowfullscreen>
    </iframe>
  </div>
</template>

Iframe Attributes

Attributes	Description
src	resource_token : refer to the steps to obtain the token. Optional query string parameters: lang : Locale (zh, ja, en). t : The default timestampe (seconds) to start playback when player initiated. shareUrl : The URL to share on social media. If no value provided, the default URL will be set to https://showroom.one.blendvision.com?token=resource_token
width	Width of the embedded window (pixels) This can be expressed as a percentage as well (e.g. 50%)
height	Height of the embedded window (pixels) This can be expressed as a percentage as well (e.g. 100%)

Obtain Resource Token

You can obtain the resource token in two ways:

Using BlendVision One CMS

If your content is set as public, you can directly obtain the iframe with resource_token for each content from:

• VOD > Publishing Tools > iframe
• Live > Publishing Tools > iframe

Using BlendVision One API

Make a POST request to the API: POST /bv/cms/v1/resources/tokens

Query Parameters	Required	Description
resource_id	Required	The unique ID of your content. You can retrieve this in two ways: 1. Using BlendVision One CMS - VOD > Publishing Tools - Live > Publishing Tools 2. Using BlendVision One API - VOD: GET /bv/cms/v1/vods - Live: GET /bv/cms/v1/lives
resource_type	Required	The streaming type of your content.
customer_id	Optional	Your custom user ID to identify who is watching the content. This parameter is required if the content's security privacy is set to SECURITY_PRIVACY_TYPE_TOKEN.
customer_name	Optional	Your custom user name to identify who is watching the content.

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}'
special tokens?
    }
  }
).then(res => res.json())