延遲播放程式實例化

在本主題中，您將學習在瀏覽HTML頁面時如何延遲Brightcove Player的實例化。例如，燈箱樣式和單頁Web應用程序（該應用程序最初未實例化帶有播放器的頁面）就是這種技術有用的用例。

延遲實例化

在一些用例中，您將要使用高級（頁面內嵌入）播放器實現代碼，但會延遲播放器實例化。為此，您必須更改<videos-js>標籤的屬性，並使用bc()初始化播放器的方法。請注意，該方法可以將玩家ID或玩家元素本身作為參數。

修改video-js標籤

延遲播放器實例化時，您不能使用所有<video-js>標籤的屬性，否則播放器將被實例化。您必須從標準“高級”（頁內嵌入）代碼中刪除三個屬性。需要刪除的屬性有：

  • data-account
  • data-player
  • data-video-id

這會將以下屬性留在<video-js>標籤：

  • data-embed
  • class
  • controls (optional)

由於必須保留這三個屬性中的任何一個而必須刪除屬性的原因，這將導致Brightcove Player實例化。

所使用的高級代碼應在以下代碼片段中進行模式化。請注意id已添加到標籤。

<video-js id="myPlayerID"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>

下面顯示的對高級代碼和JavaScript代碼的這些更改共同作用，以延遲播放器的實例化。

使用的JavaScript

一種非常普遍的做法是使用類似於以下代碼的代碼來準備與播放器進行編程交互：

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

這種方法無法實例化播放器，因此無法使用。相反，您將使用bc()設置其他首選項後實例化播放器的方法。這個bc()方法用於創建Brightcove Player的新實例，通常在使用<video-js>標記，除非遵循此處詳細說明的步驟。

  • 第2-3行：為播放器聲明一個變量，並獲取video-js元素。
  • 第 4-5 行：使用這個setAttribute()方法來設定data-account和data-player。這對於追蹤分析和其他服務非常重要。
  • 第 6 行：使用 JavaScript setAttribute()方法來設定視訊識別碼。
  • 第 9 行：使用該bc()方法初始化播放器。
  • 第12-15行：以程式設計方式播放視訊。等待loadedmetadata事件發送確保視頻已被目錄檢索，然後再嘗試播放。
<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>
  • 第2-3行：為播放器聲明一個變量，並獲取video-js元素。
  • 第 4-5 行：使用這個setAttribute()方法來設定data-account和data-player。這對於追蹤分析和其他服務非常重要。
  • 第 8 行：使用該bc()方法初始化播放器。
  • 第 10 行：設定播src放程式的。這是很重要設置兩個src和type對於源對象。如果播放技術順序中的第一個選項與視訊類型不符，某些瀏覽器可能會發生問題。
  • 第 13 行：以程式設計方式播放視訊。當然，這不是必需的。
<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script>

沒有id在播放器上

如果由於某種原因您不希望使用id對於播放器，您可以使用以下代碼延遲實例化。

  • 第 3-4 行：為播放器聲明一個變量，並獲取video-js元素。
  • 第 7-8 行：使用這個setAttribute()方法來設定data-account和data-player。這對於追蹤分析和其他服務非常重要。
  • 第 9 行：使用 JavaScript setAttribute()方法來設定視訊識別碼。
  • 第十二行：使用該bc()方法初始化播放器。
  • 第15-18行：以程式設計方式播放視訊。等待loadedmetadata事件發送確保視頻已被目錄檢索，然後再嘗試播放。
<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>
  • 第 3-4 行：為播放器聲明一個變量，並獲取video-js元素。
  • 第 7-8 行：使用這個setAttribute()方法來設定data-account和data-player。這對於追蹤分析和其他服務非常重要。
  • 第 11 行：使用該bc()方法初始化播放器。
  • 第 13 行：設定播src放程式的。這是很重要設置兩個src和type對於源對象。如果播放技術順序中的第一個選項與視訊類型不符，某些瀏覽器可能會發生問題。
  • 第 16 行：以程式設計方式播放視訊。當然，這不是必需的。
<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc('vTag');

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script>

CSAI與SSAI廣告故障轉移

啟用廣告故障轉移後，Brightcove Player會檢測瀏覽器中是否存在廣告攔截器。如果沒有，則播放您的客戶端廣告（CSAI）。如果檢測到廣告攔截器，則播放器會自動請求您的服務器端廣告（SSAI）。有關詳細信息，請參見SSAI：廣告塊檢測和自動故障轉移文件。

默認情況下，調用bc()方法強製播放器立即初始化。如果您想將廣告故障轉移與bc()方法，您需要等待播放器檢查是否存在廣告攔截器。您可以使用以下代碼執行此操作：

bc.usingAdBlocker().then(function() {
  // The promise callback receives a true/false result, which is stored
  // internally, so future bc() calls will use it. There is no need to
  // handle it yourself.
  //
  // You can pass custom arguments to bc, as normal, if needed.
  bc();
});

範例

這是一些示例代碼。

HTML

這是示例的HTML。

<video-js id="myPlayerID"
	data-embed="default"
	data-application-id=""	
	controls=""
	width="640"
	height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/W6RmT8TVL_default/index.min.js"></script>

的JavaScript

這是該示例的JavaScript。

<script type="text/javascript">
  // +++ Define the player options +++
  var options = {
    controlBar: {
      volumePanel: {
        inline: false,
        vertical: true
      }
    }
  };

  // +++ Add the player attributes +++
  var myPlayer,
		myPlayerEl = document.getElementById("myPlayerID");
  myPlayerEl.setAttribute('data-account', 1752604059001);
  myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
  myPlayerEl.setAttribute('data-video-id', 5802784116001);

  // +++ Create the player +++
  bc.usingAdBlocker().then(function() {
    myPlayer = bc(myPlayerEl, options);

    // +++ Optionally, mute and start playback +++
    myPlayer.on('loadedmetadata',function(){
      myPlayer.muted(true);
      myPlayer.play();
    });
  });
</script>