プレイヤーのインスタンス化の遅延
インスタンス化を遅らせる
Advanced(ページ内埋め込み)プレーヤー実装コードを使用したいが、プレイヤーのインスタンス化を遅らせるユースケースがいくつかあります。これを行うには、<videos-js>
タグの属性を変更し、bc()
メソッドを使用してプレーヤーを初期化する必要があります。このメソッドは、プレーヤーIDまたはプレーヤー要素自体のいずれかを引数として取ることができることに注意してください。
video-jsタグを変更する
プレーヤーのインスタンス化を遅らせる場合、すべてを使用することはできません<video-js>
タグの属性、またはプレーヤーがインスタンス化されます。標準の詳細 (ページ内埋め込み) コードから 3 つの属性を削除する必要があります。削除する必要がある属性は次のとおりです。
data-account
data-player
data-video-id
これにより、<video-js>
次の属性がタグに残ります。
data-embed
class
controls (optional)
これら 3 つの属性のいずれかが残っているため、属性を削除する必要がある理由は、Brightcove Player がインスタンス化されます。
使用される高度なコードは、次のコードスニペットでパターン化する必要があります。id
タグにが追加されることに注意してください。
<video-js id="myPlayerID"
data-embed="default"
class="video-js" controls></video-js>
<script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>
以下に示す Advanced コードと JavaScript コードに対するこれらの変更は、プレイヤーのインスタンス化を遅らせるために連携して機能します。
JavaScriptが使われた
非常に一般的な方法は、次のようなコードを使用して、プログラムでプレーヤーと対話する準備をすることです。
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
});
これは、プレーヤーをインスタンス化するので、この方法を使用することはできません。代わりに、他のプリファレンスが設定された後、bc()
メソッドを使用してプレーヤーをインスタンス化します。bc()
このメソッドは Brightcove Player の新しいインスタンスを作成するために使用され、<video-js>
通常はタグを使用するときに自動的に呼び出されます。ただし、ここで詳しく説明した手順は次のとおりです。
- 2-3行目は次のとおりです。プレーヤーの変数を宣言し、
video-js
要素を取得します。 - 4~5行目:JavaScript
setAttribute()
メソッドを使用して、data-account
およびを設定しますdata-player
。これは、分析やその他のサービスを追跡するために重要です。 - 6行目:JavaScript
setAttribute()
メソッドを使用して、ビデオ ID を設定します。 - 9行目:
bc()
メソッドを使用してプレーヤーを初期化します。 - 12~15行目は次のとおりです。プログラムでビデオを再生します。
loadedmetadata
イベントがディスパッチされるのを待っていると、ビデオが再生される前にカタログが確実に取得されます。
<script type="text/javascript">
var myPlayer,
vTag = document.getElementById('myPlayerID');
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
vTag.setAttribute('data-video-id', 2114345470001);
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc(vTag);
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
</script>
- 2-3行目は次のとおりです。プレーヤーの変数を宣言し、
video-js
要素を取得します。 - 4~5行目:JavaScript
setAttribute()
メソッドを使用して、data-account
およびを設定しますdata-player
。これは、分析やその他のサービスのトラッキングに重要です。 - 8行目:
bc()
メソッドを使用してプレーヤーを初期化します。 - 10行目です:
src
プレーヤーのを設定します。ソースオブジェクトには、src
type
およびの両方を設定することが非常に重要です。再生テクノロジーの順序の最初のオプションがビデオの種類と一致しない場合、一部のブラウザでは問題が発生する可能性があります。 - 13行目:プログラムでビデオを再生します。もちろん、これは必須ではありません。
<script type="text/javascript">
var myPlayer,
vTag = document.getElementById('myPlayerID');
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc(vTag);
myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.muted(true);
myPlayer.play();
</script>
番号id
プレイヤーに
id
何らかの理由でプレーヤーでを使用しない場合は、次のコードを使用してインスタンス化を遅らせることができます。
- 3-4行目の:プレーヤーの変数を宣言し、
video-js
要素を取得します。 - 7-8行目:JavaScript
setAttribute()
メソッドを使用して、data-account
とを設定しますdata-player
。これは、分析やその他のサービスのトラッキングに重要です。 - 9行目:JavaScript
setAttribute()
メソッドを使用して、ビデオ ID を設定します。 - 12行目です:
bc()
メソッドを使用してプレーヤーを初期化します。 - 15~18行目です:プログラムでビデオを再生します。
loadedmetadata
イベントのディスパッチを待っていると、ビデオがカタログによって取得されたことを確認してから、再生を試みます。
<script type="text/javascript">
// Retrieve the element by tag name, returns an array so use the zeroth array element
var myPlayer,
vTag = document.getElementsByTagName('video-js')[0];
// Assign the needed attributes
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
vTag.setAttribute('data-video-id', 2114345470001);
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc(vTag);
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
</script>
- 3-4行目線:プレーヤーの変数を宣言し、
video-js
要素を取得します。 - 7-8行目:JavaScript
setAttribute()
メソッドを使用して、data-account
とを設定しますdata-player
。これは、分析やその他のサービスのトラッキングに重要です。 - 11行目:
bc()
メソッドを使用してプレーヤーを初期化します。 - 13行目:
src
プレーヤーのを設定します。ソースオブジェクトには、src
type
およびの両方を設定することが非常に重要です。再生技術の順序の最初のオプションがビデオの種類と一致しない場合、一部のブラウザで問題が発生する可能性があります。 - 16行目です:プログラムでビデオを再生します。もちろん、これは必須ではありません。
<script type="text/javascript">
// Retrieve the element by tag name, returns an array so use the zeroth array element
var myPlayer,
vTag = document.getElementsByTagName('video-js')[0];
// Assign the needed attributes
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc('vTag');
myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.muted(true);
myPlayer.play();
</script>
CSAI と SSAI 広告のフェイルオーバー
広告のフェイルオーバーを有効にすると、ブラウザに広告ブロッカーがあるかどうかが Brightcove Player によって検出されます。そうでない場合は、クライアントサイド広告(CSAI)が再生されます。広告ブロッカーが検出されると、プレーヤーは自動的にサーバーサイド広告(SSAI)を要求します。詳細については、 SSAIを参照してください:広告ブロック検出と自動フェールオーバードキュメント。
デフォルトでは、bc()
メソッドを呼び出すと、プレーヤーはすぐに初期化されます。bc()
メソッドで広告のフェイルオーバーを使用する場合は、プレーヤーが広告ブロッカーが存在するかどうかを確認するまで待つ必要があります。次のコードでこれを行うことができます:
bc.usingAdBlocker().then(function() {
// The promise callback receives a true/false result, which is stored
// internally, so future bc() calls will use it. There is no need to
// handle it yourself.
//
// You can pass custom arguments to bc, as normal, if needed.
bc();
});
例
ここにいくつかのサンプルコードがあります。
HTML
これは、例のHTMLです。
<video-js id="myPlayerID"
data-embed="default"
data-application-id
class="video-js"
controls
width="640"
height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/W6RmT8TVL_default/index.min.js"></script>
JavaScript
これは、例のJavaScriptです。
<script type="text/javascript">
// +++ Define the player options +++
var options = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
}
}
};
// +++ Add the player attributes +++
var myPlayer,
myPlayerEl = document.getElementById("myPlayerID");
myPlayerEl.setAttribute('data-account', 1752604059001);
myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
myPlayerEl.setAttribute('data-video-id', 5802784116001);
// +++ Create the player +++
bc.usingAdBlocker().then(function() {
myPlayer = bc(myPlayerEl, options);
// +++ Optionally, mute and start playback +++
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
});
</script>