プレーヤーのインスタンス生成を遅延させる

インスタンス生成を遅延させる

いくつかのユースケースでは、Videoタグ（インページ埋め込み）プレーヤー実装コードを使用しつつ、プレーヤーのインスタンス生成だけを遅らせたい場合があります。そのためには、<videos-js> タグの属性を変更し、bc() メソッドを使用してプレーヤーを初期化します。このメソッドには、プレーヤー ID とプレーヤー要素そのもののいずれかを引数として渡すことができます。

video-js タグの変更

プレーヤーのインスタンス生成を遅延させる場合、<video-js> タグのすべての属性を使用することはできません。すべて指定するとプレーヤーが生成されてしまいます。標準の Videoタグ（インページ埋め込み）コードから、次の 3 つの属性を削除する必要があります。

• data-account
• data-player
• data-video-id

これにより、<video-js> タグに残る属性は次のとおりです。

• data-embed
• class
• controls (optional)

これら 3 つの属性のいずれかが残っていると Brightcove Player がインスタンス化されてしまうため、削除する必要があります。

利用する Videoタグ コードは、次のコードスニペットのような形になります。ここではタグに id が追加されている点に注意してください。

  <video-js id="myPlayerID"
    data-embed="default"
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>

上記の Videoタグ コードへの変更と、後述の 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() {
      // Promise のコールバックは true/false の結果を受け取り、
      // その結果は内部的に保存されるため、以降の bc() 呼び出しで利用されます。
      // 自分で処理する必要はありません。
      //
      // 必要に応じて、通常どおり bc にカスタム引数を渡すことができます。
      bc();
    });

例

以下はコード例です。

HTML

この例の HTML は次のとおりです。

    <video-js id="myPlayerID"
        data-embed="default"
        data-application-id=""	
        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">
      // +++ プレーヤー オプションの定義 +++
      var options = {
        controlBar: {
          volumePanel: {
            inline: false,
            vertical: true
          }
        }
      };
    
      // +++ プレーヤー属性の追加 +++
      var myPlayer,
            myPlayerEl = document.getElementById("myPlayerID");
      myPlayerEl.setAttribute('data-account', 1752604059001);
      myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
      myPlayerEl.setAttribute('data-video-id', 5802784116001);
    
      // +++ プレーヤーの生成 +++
      bc.usingAdBlocker().then(function() {
        myPlayer = bc(myPlayerEl, options);
    
        // +++ 任意で、ミュートして再生を開始 +++
        myPlayer.on('loadedmetadata',function(){
          myPlayer.muted(true);
          myPlayer.play();
        });
      });
    </script>