使用即時 SSAI 的客戶端預先廣告

概覽

使用 Brightcove Player 透過伺服器端廣告插入 (SSAI) 提供即時串流時，您可以插入用戶端的預先廣告。對於客戶端廣告，此功能支援 IMA 廣告。

警告

• 使用此功能的客戶必須使用動態傳遞。
• 僅支援 IMA 和 SSAI 外掛程式 (不支援飛輪)。
• 目前，此功能僅支援網頁上的單一玩家。

入門

若要透過即時 SSAI 串流播放用戶端 IMA 預先播放廣告，請依照下列步驟執行：

1. 建立具有 SSAI 功能的即時串流
2. 建立布萊特灣玩家
3. 使用 Studio 實現客戶端預先滾動

建立具有 SSAI 功能的即時串流

即時模組支援伺服器端廣告插入 (SSAI)，讓伺服器端廣告可在直播期間要求和顯示。若要建立即時串流，請參閱下列內容：

• 在即時模組中實作伺服器端廣告

建立布萊特灣玩家

使用 播放器 模塊創建一個新的 Brightcove 播放器。如需詳細資訊，請參閱快速入門：建立播放程式文件並設定樣式。

使用 Studio 實現客戶端預滾

為自動故障轉移廣告配置播放器的最簡單方法是使用 Studio。一旦您創建了廣告配置和播放器，那麼您就可以準備好配置播放器進行自動容錯移轉，如下所示：

1. 打開 播放器 模塊並找到要添加廣告功能的播放器。
2. 按一下播放程式的連結以開啟播放程式屬性。
3. 在左側導航菜單中，點擊 廣告。
4. 核取「啟用用戶端 (IMA) 」核取方塊。
5. 請加入 IMA 廣告代碼的網址。在此範例中，我們將使用範例廣告代碼 URL。

   

   如需有關播放程式廣告屬性的詳細資訊，請參閱使用播放器模組設定播放器廣告文件。

6. 核取「啟用伺服器端 (SSAI) 」核取方塊。

7. 從 [選取組態] 下拉式功能表中，選取您要與此播放器建立關聯的廣告設定。
8. 如果您希望覆蓋在廣告上顯示，請勾選 [啟用廣告資訊覆蓋 ] 核取方塊。這包括「進一步了解」和廣告倒數疊加層。

   

9. 按一下「儲存」按鈕。
10. 在左側導航菜單中，單擊 JSON Editor 。

11. 在 JSON 編輯器中，向下捲動，直到您看到ad_failover: true屬性為止。

    

12. 使用下列項目取代ad_failover: true屬性：

    "ima_preroll_with_ssai": true
    

13. 您的 JSON 編輯器應該看起來像這樣：

    

14. 按一下「儲存」。
15. 要發布播放器，請單擊 發布 & 嵌入... > 發布更改。
16. 現在，您已準備好發佈您的現場活動。如需詳細資訊，請參閱即時模組文件中的實作伺服器端廣告。

監聽玩家事件

使用此功能時，在 IMA 前置廣告之前或期間綁定的播放器事件偵聽器需要在 SSAI 播放開始之前重新綁定。

該ima_preroll_with_ssai功能旨在在顯示 IMA3 廣告後丟棄播放器。然後，另一個具有相同 id 的玩家被重新初始化。這就是初始玩家不會觸發事件的原因。

確保播放器事件偵聽器被觸發的合理解決方法是將它們包裝在播放器dispose事件偵聽器和 videojs setup掛鉤中，該鉤子在播放器創建後調用。

這是一個代碼示例：

const playerId = 'samplePlayer';
    let player = videojs.getPlayer(playerId);

    // Add ad listeners here for events during IMA3 playback
    player.on("ads-ad-started", function (evt) {
      player.log("IMA3: ads-ad-started! ", evt);
    });

     player.on("ads-ad-ended", function (evt) {
      player.log("IMA3: ads-ad-ended! ", evt);
    });

    player.on('dispose', () => {
      videojs.hook('setup', (newPlayer) => {

        // Make sure the new player is the one being created by the ima_preroll_with_ssai feature
        if (newPlayer.id() !== playerId) {
          return;
        }

        player = newPlayer;

        // Add ad listeners here for events during SSAI playback
        player.on("ads-ad-started", function (evt) {
          player.log("SSAI:ads-ad-started! ", evt);
        });

        player.on("ads-ad-ended", function (evt) {
          player.log("SSAI: ads-ad-ended! ", evt);
        });

        player.on("bcov-ssai-click-through", function (evt) {
          player.log("SSAI: bcov-ssai-click-through! ", evt);
        });
      });
    });