播放器加載器概述
對於Brightcove Player的用戶不想複製並粘貼頁面內嵌入或iframe Player實現，此模塊已捆綁到他們的Web應用程序中，並提供了一種無需使用集成代碼即可下載其內容即可使用Brightcove Player的方法。玩家並將其嵌入。該工具使用Brightcove庫解決了該問題，該庫可以下載任何已發布的Brightcove Player並將其嵌入DOM中。
這個庫支持常見的常青瀏覽器，Chrome、Firefox、Edge 和 Safari。
該文檔實質上提供了Brightcove Player Loader的示例用法。有關完整的詳細信息，請參見庫的Brightcove /播放器加載程序 GitHub倉庫。
有一個可與Brightcove Player一起使用的Webpack。有關詳細信息，請參見播放器加載器Webpack插件 GitHub倉庫。
安裝
該庫使用 NPM 安裝，使用以下內容：
npm install --save @brightcove/player-loader
包括圖書館
有關包括供您使用的庫的不同方法，請參見GitHub回購為圖書館。
使用承諾實現
您可以使用JavaScript承諾與圖書館。該庫不是必需的，但建議使用。默認情況下，該庫將查找全局Promise。但是，您可以通過以下方式顯式提供Promise實現：Promise參數，將在本文檔後面詳細介紹。
下面顯示了使用Promise實現的庫。一個關鍵的概念是您可以通過使用獲得對播放器的引用var myPlayer = success.ref;在裡面then處理承諾的部分：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.video-js {
height: 344px;
width: 610px;
}
</style>
</head>
<body>
<script src="brightcove-player-loader.min.js"></script>
<div id="theDiv">
</div>
<script>
brightcovePlayerLoader({
refNode: document.querySelector('#theDiv'),
accountId: '1752604059001',
playerId: 'wHBRh9M3o',
videoId: '4607357817001'
})
.then(function(success) {
var myPlayer = success.ref;
console.log('success', success);
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
})
.catch(function(error) {
console.log('error', error);
})
</script>
</body>
</html>
使用回調實現
您還可以通過以下方式使用回調實現播放器加載程序onSuccess和onFailure回調函數。
下面顯示了使用回調的庫實現。一個關鍵的概念是您可以通過使用獲得對播放器的引用var myPlayer = success.ref;在裡面onSuccess回調函數：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.video-js {
height: 344px;
width: 610px;
}
</style>
</head>
<body>
<script src="brightcove-player-loader.min.js"></script>
<div id="theDiv">
</div>
<script>
brightcovePlayerLoader({
refNode: document.querySelector('#theDiv'),
accountId: '1752604059001',
playerId: 'wHBRh9M3o',
videoId: '4607357817001',
onSuccess: function(success) {
var myPlayer = success.ref;
console.log('success', success);
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
},
onFailure(error) {
console.log('error', error);
}
});
</script>
</body>
</html>
使用播放限制
使用播放限制使用 Brightcove Player Loader，您需要做的就是獲取對播放器的引用並將 JSON Web 令牌 (JWT) 傳遞給它。
這是一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brightcove Player</title>
<meta charset="UTF-8">
<script crossorigin
src="player-loader/dist/brightcove-player-loader.min.js"></script>
</head>
<body>
<main>
<h1>Brightcove Player</h1>
<div id="theDiv"></div>
</main>
</body>
<script>
var myJwtToken = "your jwt token";
var myVideoId = "your video Id";
// +++ Add the Brightcove Player +++
brightcovePlayerLoader({
refNode: document.querySelector('#theDiv'),
accountId: 'your account Id',
playerId: 'your player Id',
onSuccess: function (success) {
// Get a reference to the BC Player
var myPlayer = success.ref;
console.log('success', success);
myPlayer.ready(function () {
// This should ideally be set in the player configuration
myPlayer.catalog.setPolicyKey(null);
myPlayer.catalog.setBcovAuthToken(myJwtToken);
myPlayer.catalog.get({
id: myVideoId,
type: 'video'
}).
then(function (data) {
myPlayer.catalog.load(data);
myPlayer.muted(true);
myPlayer.play();
}).
catch(function (error) {
throw new Error(error);
});
});
},
onFailure(error) {
console.log('error', error);
}
});
</script>
</html>
可用參數
- 名稱：
accountId -
數據類型：字符串 | 數字
描述：
視頻雲帳戶ID。 - 名稱：
applicationId -
資料類型：字串
描述：
要應用於生成的嵌入的應用程序ID。 - 名稱：
catalogSearch -
數據類型：字符串目的
描述：
要執行的Video Cloud Catalog搜索。這可以是簡單的字符串搜索，也可以是與目錄getSearch()方法。如果給出的非字符串值不可序列化為 JSON，則此參數將被忽略。 - 名稱：
catalogSequence -
資料類型：數組|目的
描述：
要執行的視頻雲目錄序列。見目錄getLazySequence()方法欲獲得更多信息。如果給出的非字符串值不可序列化為 JSON，則此參數將被忽略。 - 名稱：
embedId -
數據類型：串
描述：
Brightcove Player嵌入播放器的ID。預設值為'default'。對於大多數用戶，默認值是正確的。 - 名稱：
embedOptions -
資料類型：物件
描述：
用於為嵌入生成提供某些選項。這些包括：embedOptions.pip布林 如果 true，會將嵌入在<div class="vjs-pip-container">元件。當您需要支持時，應使用此選項Brightcove畫中畫插件。預設值為false。embedOptions.playlist布林 如果 true，將添加一個<div class="vjs-playlist">元素嵌入後。當您需要支持時，應使用此選項Brightcove播放列表UI插件。預設值為false。embedOptions.responsive布爾|目的 用於自定義嵌入代碼，以使用intrinsic ratio包裝方法。設置為true時，將生成寬高比為16：9的自適應嵌入代碼，該代碼將填充其容器。預設值為 false。
可以提供一個對象，使用以下子屬性來自定義此對象：aspectRatio：用於將寬高比自定義為16：9以外的值（例如“ 4：3”）的字符串。maxWidth：用於限製播放器最大寬度的字符串。這應該使用CSS單位，例如像素（例如'960px'）。
embedOptions.unminified布林 如果 true，將使用播放器的未縮小版本。這對於調試目的可能是有用的，但要付出更大的播放器下載費用。不建議用於生產！預設值為false。 - 名稱：
embedType -
資料類型：字串
描述：
要生成的嵌入代碼類型。此參數的值必須是下列其中一項：'in-page'要么brightcovePlayerLoader.EMBED_TYPE_IN_PAGE：也稱為高級嵌入代碼，這會將播放器直接注入到頂級網頁中。'iframe'要么brightcovePlayerLoader.EMBED_TYPE_IFRAME：也稱為基本嵌入代碼，這會將播放器作為<iframe>元素注入。
'in-page'。 - 名稱：
onEmbedCreated -
資料類型：功能（元素）
描述：
用於自定義embed元素的回調（video-js元素或iframe元素）插入到DOM中或由於embedOptions以及下載並初始化播放器之前。embed元素可能會發生突變，或者，如果此回調返回一個元素，則該元素將用作embed元素。潛在的用例是添加/刪除屬性或添加子元素，例如源或音軌。 - 名稱：
onFailure -
資料類型：功能（錯誤）
描述：
一個回調函數，允許在以下情況下處理故障Promise不可用或不希望使用。傳遞此函數將阻Promise止返回。它得到一個Error對像作為參數。此函數的返回值被忽略。 - 名稱：
onSuccess -
資料類型：功能（對象）
描述：
一個回調函數，允許在以下情況下處理成功Promise不可用或不希望使用。傳遞此函數將阻Promise止返回。它得到一個Success對像作為參數。此函數的返回值被忽略。 - 名稱：
options -
資料類型：物件
描述：
Video.js 選項對象在播放器創建過程中通過。這些選項將優先於Brightcove Player配置中指定的任何設置。此參數不能與iframe嵌入一起使用。 - 名稱：
playerId -
資料類型：字串
描述：
Brightcove Player的玩家ID。默認是'default'。 - 名稱：
playlistId -
數據類型：字符串 | 數字
描述：
視頻雲播放列表ID或播放列表參考ID。 - 名稱：
playlistVideoId -
數據類型：字符串 | 數字
描述：
在由指定的結果播放列表中可以找到的Video Cloud視頻ID
playlistId。如果此參數被忽略playlistId不見了。 - 名稱：
Promise -
資料類型：功能（功能）
描述：
用於顯式提供Promise實施。如果提供，它將代替任何全球Promise。默認是window.Promise - 名稱：
refNode -
資料類型：元素|串
描述：
Required
播放器將嵌入的DOM元素。如果未作為DOM元素提供，則可以作為字符串提供，並將其傳遞給document.querySelector。 - 名稱：
refNodeInsert -
資料類型：字串
描述：
相對於參考DOM元素（由refNode指定）插入播放器的方式。此參數的值必須是下列其中一項：'append'要么brightcovePlayerLoader.REF_NODE_INSERT_APPEND：播放器將是參考節點的最後一個子節點。'prepend'要么brightcovePlayerLoader.REF_NODE_INSERT_PREPEND：玩家將是參考節點的第一個孩子。'before'要么brightcovePlayerLoader.REF_NODE_INSERT_BEFORE：播放器將是參考節點的先前同級。'after'要么brightcovePlayerLoader.REF_NODE_INSERT_AFTER：播放器將是參考節點之後的下一個兄弟姐妹。'replace'要么brightcovePlayerLoader.REF_NODE_INSERT_REPLACE：參考節點將被刪除，並由播放器替換。
- 名稱：
videoId -
數據類型：字符串 | 數字
描述：
視頻雲視頻ID或視頻參考ID。