Brightcoveのプレーヤーローダー
プレーヤーローダーの概要
Brightcove Playerのユーザーが、ページ内埋め込みまたはiframeプレーヤーの実装をコピーして貼り付けたくない場合、このモジュールはWebアプリケーションにバンドルされており、ダウンロードするための統合コードを記述せずにBrightcovePlayerを使用する方法を提供します。プレーヤーとそれらを埋め込みます。このツールは、公開されているBrightcoveプレーヤーをダウンロードしてDOMに埋め込むことができるBrightcoveライブラリの問題を解決します。
このライブラリは、一般的な常緑のブラウザ、Chrome、Firefox、Edge、およびSafariをサポートしています。
このドキュメントは基本的に、Brightcove PlayerLoaderの使用例を示しています。詳細については、ライブラリの brightcove/プレーヤーローダー GitHub レポを参照してください。
Brightcove Playerで利用できる Web パックがあります。その詳細については、プレーヤーローダー Webpack-Plugin GitHub リポジトリにあります。
インストール
ライブラリは、次を使用して NPM を使用してインストールされます。
npm install --save @brightcove/player-loader
ライブラリを含む
あなたの使用のためのライブラリを含めるさまざまな方法については、ライブラリの GitHub リポジトリを参照してください。
Promiseを使用した実装
あなたは使用することができますJavaScript Promiseライブラリで。このライブラリが機能するために約束は必要ありませんが、推奨されます。デフォルトでは、このライブラリはグローバル 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>
使用可能なパラメータ
- 名前:
accountId
-
データ型:文字列 | 数値
説明:
ビデオクラウドアカウントID。 - 名前:
applicationId
-
データ型:文字列
説明:
生成された埋め込みに適用されるアプリケーション ID。 - 名前:
catalogSearch
-
データ型:文字列 | オブジェクト
説明:
実行するビデオクラウドカタログ検索。これは、単純な文字列検索または一致するオブジェクトにすることができますカタログgetSearch()
方法。JSON としてシリアライズできない文字列以外の値が指定された場合、このパラメータは無視されます。 - 名前:
catalogSequence
-
データ型:アレイ|オブジェクト
説明:
実行するビデオクラウドカタログシーケンス。を参照してくださいカタログgetLazySequence()
方法詳細については。JSON としてシリアライズできない文字列以外の値が指定された場合、このパラメータは無視されます。 - 名前:
embedId
-
データ・タイプ:ストリング
説明:
Brightcove Playerは、プレーヤーのIDを埋め込みます。デフォルト値はです'default'
。デフォルト値は、ほとんどのユーザーにとって正しいです。 - 名前:
embedOptions
-
データタイプ: オブジェクト
説明:
埋め込み生成の特定のオプションを提供するために使用されます。たとえば、次のような事項が挙げられます。embedOptions.pip
ブール値 場合は true
、<div class="vjs-pip-container">
要素に埋め込みをラップします。これは、 Brightcove Picture-in-Picture プラグインのサポートが必要な場合に使用します。デフォルト値はですfalse
。embedOptions.playlist
ブール値 場合は true
、<div class="vjs-playlist">
埋め込みの後に要素を追加します。これは、ブライトコーブプレイリスト UI プラグインのサポートが必要な場合に使用します。デフォルト値はですfalse
。embedOptions.responsive
ブール値|オブジェクト 埋め込みコードをカスタマイズして、固有比ラッパーアプローチ。trueの場合、コンテナを満たす16:9のアスペクト比のレスポンシブ埋め込みコードを生成します。デフォルト値はです false
。
次のサブプロパティを使用して、これをカスタマイズするためのオブジェクトを提供できます。aspectRatio
:アスペクト比を 16:9 以外の値にカスタマイズするために使用される文字列 (例:'4:3')。maxWidth
:プレーヤーの最大幅を抑制するために使用される文字列。これは、ピクセルなどの CSS 単位を使用する必要があります (例:'960px')。
embedOptions.unminified
ブール値 場合 true
、プレーヤーの縮小されていないバージョンを使用します。これはデバッグの目的に役立ちますが、より大きなプレーヤーのダウンロードにかかる費用がかかります。生産にはお勧めしません! デフォルト値はですfalse
。 - 名前:
embedType
-
データ型:文字列
説明:
生成する埋め込みコードタイプ。このパラメータの値は、次のいずれかである必要があります。'in-page'
またはbrightcovePlayerLoader.EMBED_TYPE_IN_PAGE
:高度な埋め込みコードとも呼ばれ、プレーヤーをトップレベルの Web ページに直接挿入します。'iframe'
またはbrightcovePlayerLoader.EMBED_TYPE_IFRAME
:基本埋め込みコードとも呼ばれ、プレーヤーを <iframe> 要素として挿入します。
'in-page'
。 - 名前:
onEmbedCreated
-
データタイプ: 機能(要素)
説明:
埋め込み要素をカスタマイズするために使用されるコールバック(いずれかvideo-js
要素またはiframe
要素)DOMに挿入される前、または結果としてカスタマイズされる前embedOptions
プレーヤーがダウンロードされて初期化される前。embed要素は変更される可能性があります。または、このコールバックが要素を返す場合、その要素がembed要素として使用されます。潜在的なユースケースは、属性の追加/削除、またはソースやトラックなどの子要素の追加です。 - 名前:
onFailure
-
データタイプ: 関数(エラー)
説明:
障害の処理を可能にするコールバック関数Promise
利用できないか、望ましくありません。この関数を渡すと、Promise
が返されなくなります。これは、Error
引数として単一のオブジェクトを取得します。この関数の戻り値は無視されます。 - 名前:
onSuccess
-
データタイプ: 関数(オブジェクト)
説明:
成功の処理を可能にするコールバック関数Promise
利用できないか、望ましくありません。この関数を渡すと、Promise
が返されなくなります。これは、Success
引数として単一のオブジェクトを取得します。この関数の戻り値は無視されます。 - 名前:
options
-
データタイプ: オブジェクト
説明:
Video.js オプションオブジェクトプレーヤーの作成プロセス中に通過します。これらのオプションは、BrightcovePlayer構成で指定された設定よりも優先されます。このパラメータは、iframe 埋め込みでは使用できません。 - 名前:
playerId
-
データ型:文字列
説明:
Brightcove PlayerプレーヤーID。デフォルトは'default'
。 - 名前:
playlistId
-
データ型:文字列 | 数値
説明:
Video Cloud プレイリスト ID または再生リストの参照 ID。 - 名前:
playlistVideoId
-
データ型:文字列 | 数値
説明:
で指定された結果の再生リストにある Video Cloud ビデオ ID
playlistId
。が欠落している場合playlistId
、このパラメータは無視されます。 - 名前:
Promise
-
データタイプ: 関数(関数)
説明:
明示的に提供するために使用されますPromise
実装。提供されている場合、これはグローバルの代わりに使用されますPromise
。デフォルトはwindow.Promise
- 名前:
refNode
-
データタイプ: 要素 | 文字列
説明:
必須
プレーヤーが埋め込まれる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
-
データ型:文字列 | 数値
説明:
VideoCloudビデオIDまたはビデオ参照ID。