iFrame 播放器

控制 iFrame 播放器的播放行為

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

 

本指南介紹如何控制 BlendVision One iframe 播放器的播放行為,實現播放器與您的網站之間的無縫互動。

 

開始之前

在執行步驟之前,請確保您已準備好 BlendVision One 串流 iframe。以下指南將幫助您準備好您的 iframe:

 

步驟 1:在 iframe 程式碼中定義一個唯一識別 ID

請在 iframe 程式碼中加入 id="IFRAME_ID",將 IFRAME_ID 替換為您設定的唯一識別 ID

<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>

 

步驟 2:使用 Post 訊息控制播放行為

使用以下 Post 訊息命令來控制您的 iframe 播放器

暫停

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

bvOnePage.contentWindow.postMessage(

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

 '*'

)

 

跳轉至目標時間

將目標時間(以秒為單位)放入 args: []

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

bvOnePage.contentWindow.postMessage(

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

 '*'

)

 

播放

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

bvOnePage.contentWindow.postMessage(

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

 '*'

)

 

了解更多

要追蹤播放行為,請參照 此處 提供的文章

 

更新於