通過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>