iFrame 播放器

快速入門：播放 BlendVision One 的公開串流

（以下內容均翻譯自英文版文件，最新資訊及內容敬請切換至英文語系參考原文）

 

只需使用 iframe 嵌入碼，便能在您的網站中嵌入 BlendVision One 串流

本指南將指導您使用 iframe 播放器，來啟動公開的 BlendVision One 串流播放的步驟。

 

開始之前

在繼續步驟之前，請確保您已準備好 BlendVision One 串流內容。您可以通過兩種方式準備您的內容：

 

步驟 1：取得 BlendVision One 串流內容的 iFrame 嵌入碼

您可以通過兩種方式獲取 iframe 嵌入碼：

  • 從 BlendVision One Console 裡複製
    • VOD > 發布工具 > iframe
    • 直播 > 發布工具 > iframe

  • 通過 BlendVision One API 提取
    • 按照 驗證步驟 取得有效的 API 令牌
    • 取得預期要播放的串流內容的 resource_id 和 resource_type 。 
    • 使用 API 取得 resource token ： /bv/cms/v1/resources/tokens ，並將 resource_id 和 resource_type 設為主體參數 
      • 您也可以在主體參數中加入 customer_id  ，以使用自定義的使用者 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())
  • 將以下 iframe 嵌入碼中的 {token} 替換為前面步驟裡取得的有效 resource token
<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>

 

步驟 2：在您的網站上嵌入 iFrame 播放器

將前一步驟裡取得的 iframe 嵌入碼，嵌入您的 HTML 主體裡。

 

了解更多

為確保流暢的播放體驗，請確認：

 

更新於