bc () と getPlayer () メソッドを使用する
bc()
getPlayer()
メソッドとメソッドを使用する。それぞれの関数とそれらのベストプラクティスも含まれる使う。また、この文書には、getPlayer()
videojs()
Brightcove Playerへの参照を取得するためのおよびメソッドの比較も記載されています。はじめに
Brightcove Player で開発を行う際の基本的な要件は、プレーヤーへの参照を取得することです。これを実行するためのベストプラクティスは、Brightcove Player 6.x のライフサイクルを通じて変わりました。以下は、従うべきベストプラクティスです (各箇条書きの詳細については、このドキュメントの後半を参照してください)。
<video>
タグのバージョンを使用しているときにプレーヤーへの参照を取得するには、次のいずれかの操作を行います。- v6.16.0+
videojs.getPlayer()
メソッドを使用します。 - v6.16.0 の前に、
videojs()
メソッドを使用します。
- v6.16.0+
- アドバンス (ページ内埋め込み) プレーヤーの実装を使用する場合、ベストプラクティスは次のとおりです。
- v6.11.0+
<video-js>
タグを使用します。 - v6.11.0より前は、
<video>
タグを使用します。
- v6.11.0+
- ページ上でプレーヤーを手動でインスタンス化する場合は、
bc()
メソッドを使用します。このメソッドはプレーヤーへの参照を生成します。
getPlayer()
対videojs()
何時も Brightcove Player で開発を行っていれば、myPlayer
プレイヤーへの参照を取得して変数に格納するために、次のようなコードが使用されていることがほとんど分かります。
videojs('myPlayerID').ready(function(){
var myPlayer = this;
});
v6.16.0以降を使用している場合は、player.getPlayer()
APIをよりクリーンに使い、推奨されるベストプラクティスとしてここに表示:
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
});
video-js
video
タグとタグ
Brightcove Player v6.11.0 以降では、<video-js>
<video>
オーバーを使用するのがベストプラクティスです。その理由は次のとおりです。
- を使用すると
<video-js>
、<video>
要素で取得できるネイティブコントロールの問題のフラッシュを防ぐことができます。この例は、Chromeバージョン67以降です。Chrome では、<video>
タグが Brightcove Player に変換されるまで、壊れた動画アイコンが一時的に表示されます。アイコンは次のように表示されます。 - ビデオクラウド以外のメディアを使用する場合など、場合によっては、
<video-js>
プレイヤーは初期化プロセスをより細かく制御できます。これにより、<video>
要素に関連付けられた自動ブラウザ動作を防ぐことができます。
bc()
メソッドの詳細
bc()
このメソッドは、選択した時点でプレイヤーをインスタンス化するために使用されます。Player のインスタンス化の遅延に関するドキュメントでは、ユースケースと実装について説明します。Brightcove Playerのサンプル:垂直ボリュームコントロールは、bc()
ボリュームコントロールの方向を垂直に変更する方法の別の使用方法を示しています。垂直方向は、プレーヤーがインスタンス化される前に実行する必要があります。
メソッドの構文は次のとおりです。
bc(id,options)
どこ:
id
:- 説明:ビデオ要素またはビデオ要素 ID
- データ型:文字列|要素
- 必須:真
options
:- 説明:設定を提供するオプションオブジェクト
- データ型:オブジェクト
- 必須:false
- このメソッドは Brightcove Player インスタンスを返します。
たとえば、video-js
次のタグと JavaScript を使用してプレーヤーを構成できます。
<video-js id="myPlayerID"
data-embed="default"
data-application-id
class="video-js"
width="640" height="360"
controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
<script type="text/javascript">
// +++ Define the player options +++
var options = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
}
}
};
// +++ Add the player attributes +++
var myPlayerEl = document.getElementById("myPlayerID");
myPlayerEl.setAttribute('data-account', 1752604059001);
myPlayerEl.setAttribute('data-player', 'default');
myPlayerEl.setAttribute('data-video-id', 5557662144001);
// +++ Create the player +++
bc(myPlayerEl, options);
</script>
通常のプレーヤー構成オプション ( Player Configuration Guide に詳述 ) の内、bc()
メソッドでは次のオプションを使用できます。
有効な構成オプション |
---|
autoplay |
言語 |
言語 |
ループ |
ミュートされた |
プレイシンライン |
プリロード |
techOrder |