在一個頁面上使用多個玩家

在本主題中，您將學習如何在單個HTML頁面上使用多個Brightcove Player。

多個玩家

如果您在同一頁面上使用多個播放器，則無需執行任何特殊操作。例如，在同一頁面上放置以下播放器是完全可以接受的。

<video-js data-video-id="4093372393001"
  data-account="1507807800001"
  data-player="ry3j6rsze"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1507807800001/ry3j6rsze_default/index.min.js"></script>

<video-js data-video-id="5076962725001"
  data-account="1507807800001"
  data-player="BkTGbgSq"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.min.js"></script>

 

特別注意事項

在同一HTML頁面上放置多個播放器時，請注意以下幾點：

  • 您可以使用單個 index.min.js文件在同一頁面上使用同一播放器的多個實例。我們強烈建議盡可能使用一個 index.min.js檔案，因為這樣可以節省大量的頁面載入時間。
  • 在一個頁面上有多個播放器並將其preload設置為可能非常昂貴的帶寬方面auto。通常不建議這樣做。
  • 您不能在同一頁面上使用多個玩家，而這些玩家來自不同帳戶，而這兩個玩家都使用的玩家 ID 值default。（提醒您，在進階玩家代碼中，玩家 ID 會在data-player屬性中使用。）解決方法是複制默認播放器之一，使其具有唯一的標識符。
  • 如果您使用的是 IE11  並且在頁面上有同一個播放器的多個實例，則需要確保每個播放器實例對該id屬性具有唯一值 或不使用id屬性。
  • 不支持混合使用不同版本的頁內播放器。它可能適用於類似版本，但很容易引起問題。如果您需要混合使用不同版本的播放器，請使用iframe。如果播放器的版本相同，那應該沒問題。
  • 當混合頁內播放器時，全局BC將引用頁面中的最後一個播放器。
  • 嘗試使用AMD模塊加載器（如RequireJS和多個頁內播放器）時，存在已知問題。目前，我們尚無解決方法。
  • 在具有高級嵌入代碼的頁面上嵌入多個360視頻時，只有第一個視頻可以具有360交互性。解決方法是使用基本（iframe）嵌入，以允許多個360度視頻互動。
  • 不支持將具有360視頻的播放器與具有非360視頻的播放器混合。
  • 如果多個播放器在一個頁面上有相同的id並且在裡面指定不同的尺寸<video>標記使用width和height屬性，來自最後一個玩家的玩家 CSS 將應用於所有玩家。

    因應措施

    • 如果您希望他們具有不同的尺寸或樣式，請使用具有不同玩家ID的玩家
    • 為使用 CSS 提供播放器大小調整的播放器定義一個類，並將類添加到不同播放器的視頻標籤