サポートに連絡する| システムステータス
ページコンテンツ

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

    In this topic, you will learn how to delay instantiation of Brightcove Player when an HTML page is browsed. Use cases where this technique is helpful are, for example, lightbox styles and single page web apps where the page with the player is not initially instantiated.

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

    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プレーヤーのを設定します。ソースオブジェクトには、srctypeおよびの両方を設定することが非常に重要です。再生テクノロジーの順序の最初のオプションがビデオの種類と一致しない場合、一部のブラウザでは問題が発生する可能性があります。
    • 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プレーヤーのを設定します。ソースオブジェクトには、srctypeおよびの両方を設定することが非常に重要です。再生技術の順序の最初のオプションがビデオの種類と一致しない場合、一部のブラウザで問題が発生する可能性があります。
    • 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>

    ページの最終更新日30 Sep 2021