顯示覆蓋外掛程式

概覽

您可以根據以下內容控制疊加消息的顯示：

• 玩家賽事-例如play，pause或自訂事件
• 時間間隔-視訊播放期間的指定時間

下面的示例視頻演示了疊加插件的用法。覆蓋圖將在開始以及不同的時間段出現，一個開始於五秒。開始和暫停視頻以查看疊加層對這些事件的反應。

本主題包含下列各節：

• 使用Players模塊實施
• 使用自定義代碼實施
• 疊加插件選項

使用播放器模組實作

要使用播放器模塊實現疊加插件，請按照以下步驟操作：

1. 開啟 PLAYER 模組並建立新的播放器，或找到您想要新增外掛程式的播放程式。
2. 按一下播放程式的連結以開啟播放程式的屬性。
3. 在左側導航中，單擊插件 .
4. 展開添加插件下拉菜單，然後選擇自定義插件 .

   

5. 在「外掛程式名稱」中輸入overlay。
6. 在這個網址中，輸入：

   https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js

7. 對於 CSS 網址，請輸入：

   https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css

8. 在 [選項 (JSON) ] 文字方塊中輸入組態選項。下面的示例將在播放器底部顯示一個錨點，開始於2秒標記，結束於6秒標記。

   {
     "overlays": [
       {
         "align": "bottom",
         "start": 2,
         "end": 6,
         "content": "<a href='http://www.brightcove.com'>Proceed to Home Page</a>"
       }
     ]
   }

9. 檢查以確保表格顯示如下：

   

10. 按一下「儲存」。
11. 要發布播放器，請點擊發布和嵌入>發布更改。
12. 要關閉打開的對話框，請單擊關。

使用程式碼實作

要使用自定義代碼實現插件，您將配置以下插件屬性：

• scripts -為插件提供的 JavaScript，不會改變不同的插件實現
• stylesheets -為插件提供的CSS，並且對於不同的插件實現不會更改
• plugin name -總是overlay
• plugin options -包含屬性和值的陣列

要將插件添加到您的代碼中，請按照下列步驟操作：

1. 添加疊加插件默認樣式表。您可以使用默認樣式表，也可以創建自己的樣式。

   <link href="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css" rel='stylesheet'>

2. 添加videojs-overlay.js腳本文件以包含疊加插件。當該插件包含在您的頁面中時，它將自動註冊自己。

   <video-js id="myPlayerID"
       data-account="1752604059001"
       data-player="972ee851-3d7e-43a0-8db1-2c6fb06bad34"
       data-embed="default"
       controls="">
   </video-js>
   
   <script src="https://players.brightcove.net/1752604059001/972ee851-3d7e-43a0-8db1-2c6fb06bad34_default/index.min.js"></script>
   
   <script src="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js"></script>

3. 獲取對Brightcove Player的參考。在此示例中，我們將創建一個名為myPlayer並將其分配給播放器。

   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
     });
   </script>

   要顯示疊加消息，請使用options屬性以將數據傳遞給插件。此示例顯示如何包括3條疊加消息：

   • 第一次疊加：
     • 當play事件被調度，並且當pause事件已調度。
   • 第二個疊加層：
     • 視頻播放經過5秒時顯示，而視頻播放經過10秒時則隱藏。
     • 它位於播放器的右下角。
   • 第三次疊加：
     • 當視頻播放經過12秒時顯示，而當視頻播放經過17秒時則隱藏。
     • 它位於播放器的左下角。
     • 由於此疊加層沒有content選項定義，它使用默認值默認疊加內容，在overlays數組。
    

   如果在代碼中包括覆蓋腳本，則可以按以下方式定義消息：

   <script id="pageScript" type="text/javascript">
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
       myPlayer.overlay({
       content: '<strong>Default overlay content</strong>',
       overlays: [{
         align: "top",
         content: 'This event-triggered overlay message appears when the video is playing',
         start: 'play',
         end: 'pause'
       }, {
         content: 'This timed overlay message appears between 5 and 10 seconds',
         start: 5,
         end: 10,
         align: 'bottom-right'
       }, {
         start: 12,
         end: 17,
         align: 'bottom-left'
       }]
     });
    });
   </script>

選項

以下插件選項用於控制疊加層對象：

• align：
  • 該值必須是受支持的字符串值。
  • 這定義了顯示疊加層的位置。如果包括默認樣式表，則支持以下值：top-left，top，top-right，right，bottom-right，bottom，bottom-left，left。
• attachToControlBar：
  • 該值可以是字符串或布爾值。如果該值為字符串，則該值必須為ControlBar組件的名稱。

  • 如果設置為true或字符串值，當控制欄最小化時，底部對齊的疊加層將調整位置。這對未與底部，左下或右下對齊的疊加層沒有影響。該選項用於默認控制欄，可能不適用於自定義控制欄。底部對齊的疊加層將在指定組件之前插入。否則，將底部對齊的疊加層插入到ControlBar的第一個子組件之前。所有其他疊加層都插入在ControlBar組件之前。

  • 該選項可以在頂層使用所有符合條件的對齊方式進行設置：

    myPlayer.overlay({
      content: 'Default overlay content',
      attachToControlBar : true,
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left'
      }]
    });

    或對於單個疊加層對象：

    myPlayer.overlay({
      content: 'Default overlay content',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left',
        attachToControlBar : true
      }]
    });

    頂層設置可以通過在單個疊加層對像上的選項使用來覆蓋。

  • 在以下屏幕截圖中可以看到視覺效果：

    

    

    

• class：
  • 一個自定義HTML類，用於添加到覆蓋元素。您可以像定義任何類選擇器一樣定義樣式，但必須使用.video-js選擇器以及您選擇的選擇器（必須增加特異性，以免覆蓋樣式）：

    .video-js .customOverlay {
      color: yellow;
      background-color: red;
    }

  • 該選項可以在頂層使用所有符合條件的對齊方式進行設置：

    myPlayer.overlay({
      content: 'Default overlay content',
      class: 'customOverlay',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }]
    });

    或對於單個疊加層對象：

    myPlayer.overlay({
      content: 'Default overlay content',
      overlays: [{
        class: 'customOverlay',
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        class: 'customOverlay2',
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }]
    });

    頂層設置可以通過在單個疊加層對像上的選項使用來覆蓋。

• content：
  • 該值可以是字符串或DOM對象。
  • 這是將包含在疊加層中的HTML。您可以傳入字符串，HTML元素或DOM文檔片段。
  • 默認值為字符串This overlay will show up while the video is playing。
  • 可以在頂層或為單個覆蓋對象設置此選項。
• end：
  • 該值可以是字符串或數字。
  • 這定義了何時隱藏疊加層。如果該值為字符串，則將其解釋為事件名稱。如果是數字，則當視頻播放中的時間（以秒為單位）過去時，疊加層將被隱藏。如果值為字符串，則將其解釋為  Brightcove Player事件名稱，例如play，pause要么ended。所有玩家事件的列表位於播放器API。
• overlays：
  • 覆蓋對象的數組。
  • 重疊對象應至少包含一個start和end選項。根據需要使用其他選項。
• showBackground：
  • 值是布爾值。
  • 確定是否在疊加層周圍包括背景樣式和填充。可以通過在單個疊加層對像上進行設置來覆蓋此設置。
• start：
  • 該值可以是字符串或數字。這定義了何時顯示覆蓋圖。
  • 如果是數字，則當視頻播放中的時間（以秒為單位）過去時，將顯示覆蓋圖。
  • 如果值為字符串，則將其解釋為  Brightcove Player事件名稱，例如play，pause要么ended。以下是一些有用的鏈接：
    • 玩家事件
    • 播放器API參考
  • 這是一個在視頻開始播放之前顯示覆蓋文字的示例：

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.overlay({
        content: '<strong>Default overlay content</strong>',
        overlays: [{
          align: "top",
          content: 'This event-triggered overlay message appears before the video starts playing',
          start: 'loadstart',
          end: 'play'
        }]
      });
    });

您可以使用播放器派發的任何事件，這些事件在播放器方法/事件API文檔，或者您可以使用自己的自定義事件。

所有這些屬性都是可選的，但如果至少不包含start和end屬性。

樣式疊加層

使用疊加層時，兩種樣式可能對您有所幫助。它們在這裡詳細說明。

隱藏背景

以下CSS將隱藏背景：

.vjs-overlay.vjs-overlay-top.vjs-overlay-background {
  width: 100 % ;
  margin: auto;
  left: 0;
  background: none;
}

隱藏覆疊

以下CSS將隱藏背景：

.hide-overlay.vjs-overlay {
  display: none;
}

這兩種樣式都有助於Brightcove Player示例：切換覆蓋文件。

變更記錄檔

在這裡看到更改日誌。