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

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

通過URL設置視頻ID

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

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

使用參考編號

在本文檔中使用視頻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

通過標籤屬性設置視頻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>

使用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>

在iframe中設置視頻

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

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

您還可以使用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>