以程式設計方式將視訊指派給播放程式

在本主題中，您將學習如何在播放器中動態更改視頻。為此，您將以編程方式更改播放器實例。本文檔介紹了在播放器中更改視頻的各種方法。

通過URL設置視頻ID

可以使用URL實現並動態更改播放的視頻。為此，您可以在表格的URL末尾使用查詢字符串?videoId=YOUR_VIDEO_ID如以下示例所示。

https://players.brightcove.net/..._default/index.html?videoId=2114345471001
HTML

使用參考編號

在本文檔中使用視頻ID的所有示例中，參考編號可以代替。如果您使用參考ID，則必須在標識符之前加上參考：。例如，第一個URL使用視頻ID，而第二個URL使用參考ID。

https://players.brightcove.net/..._default/index.html?videoId=2114345471001
https://players.brightcove.net/..._default/index.html?videoId=ref:1234abcd
HTML

通過標籤屬性設置視頻ID

頁內嵌入代碼包含<video>標籤。視頻的視頻雲ID與data-video-id HTML 5 數據屬性。

<video-js
  data-account="1507807800001"
  data-player="dadff0fb-5635-4eac-a1b8-ab8c37a72be9"
  data-embed="default"
  data-video-id="2114345471001"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/dadff0fb-5635-4eac-a1b8-ab8c37a72be9_default/index.min.js"></script>
HTML

使用JavaScript設置視頻

在許多情況下，您希望用戶交互來控製播放哪個視頻。為此，您可以使用JavaScript和播放器目錄的getVideo()和load()動態檢索和播放所需視頻的方法。

  • 第1-10行：高級（頁內嵌入）代碼，對於data-video-id屬性。
  • 第 13,19 行：使用ready()確保玩家已準備好採取行動的方法。
  • 第十四行：關聯玩家，簡稱為this在函數中，帶有變量。
  • 第 15,18 行：使用目錄的getVideo()視頻雲ID和回調函數作為參數的方法。
  • 第十七行：使用目錄的load()加載視頻並播放的方法。
<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="rf1BTdKk6M"
  data-embed="default"
  controls=""
  data-video-id=""
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.catalog.getVideo('2114345471001', function(error, video) {
        //deal with error
        myPlayer.catalog.load(video);
      });
    });
  </script>
HTML

在iframe中設置視頻

要將視頻指定給內置在iframe中的播放器，您可以通過URL的查詢字符串傳遞視頻ID（或前面提到的參考ID）。例如：

<iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
allowfullscreen=""
allow="encrypted-media"
width="960" height="540"></iframe>
HTML

您還可以使用JavaScript更改iframe的查詢字符串src屬性來告訴播放器播放哪個新視頻。

  • 第 1-4 行：iframe實施代碼。請注意查詢字符串（？字符）提供要播放的視頻的ID。
  • 第 7 行：定義應該更改視頻時要調用的函數。
  • 第 8 行：使用JavaScript的getElementsByTagName()放置方法<iframe>標記為變量。請注意，該方法返回頁面上所有匹配元素的數組，並且由於您正在使用頁面上的第一個（也是唯一的）iframe代碼，因此可以使用數組的第零個元素。
  • 第 9 行：創建一個查詢字符串，它將替換舊的查詢字符串。這定義了要播放的新視頻。
  • 第 10 行：分配給變量src的屬性iframe標籤。
  • 第 11 行：提取播放器的源，減去舊的查詢字符串。
  • 第十二行：建立新的價值src屬性，方法是將播放器源與新視頻的查詢字符串定義結合在一起。
  • 第 13 行：將新的源/視頻信息分配給<iframe>標籤的src屬性。
<iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

<script type="text/JavaScript">
  function changeVideo() {
    var iframeTag = document.getElementsByTagName("iframe")[0],
      newVideo = "?videoId=3742256815001",
      theSrc = iframeTag.src,
      srcWithoutVideo = theSrc.substring( 0, theSrc.indexOf( "?" ) ),
      newSrc = srcWithoutVideo + newVideo;
    iframeTag.src = newSrc;
  }
</script>
HTML