プレイヤーのインスタンス化の遅延

インスタンス化を遅らせる

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>通常はタグを使用するときに自動的に呼び出されます。ただし、ここで詳しく説明した手順は次のとおりです。

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

<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何らかの理由でプレーヤーでを使用しない場合は、次のコードを使用してインスタンス化を遅らせることができます。

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

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