サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    遅延 Player インスタンス化

    このトピックでは、インスタンス化を遅延させる方法を学習します。 Brightcove Player HTMLページが閲覧されたとき。 この手法が役立つユースケースは、たとえば、ライトボックススタイルや、 player 最初はインスタンス化されていません。

    遅延インスタンス化

    Advanced(ページはめ込み)を使用するいくつかのユースケースがあります。 player 実装コード、ただし遅延 player インスタンス化。 これを行うには、 <videos-js> タグの属性を bc() 初期化するメソッド player。 このメソッドは、 player IDまたは player 要素自体を引数として。

    video-jsタグの変更

    遅れるとき player インスタンス化、すべてを使用することはできません <video-js> タグの属性、または player インスタンス化されます。 標準の詳細(ページはめ込み)コードからXNUMXつの属性を削除する必要があります。 削除する必要がある属性は次のとおりです。

    • 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コードへのこれらの変更は、連携して、 player.

    使用されるJavaScript

    非常に一般的な方法は、次のようなコードを使用して、プログラムで対話する準備をすることです player:

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
    });

    このアプローチはインスタンス化されるため、使用できません。 player。 代わりに、 bc() インスタンス化するメソッド player 他のプリファレンスが設定された後。 この bc() メソッドを使用して、次の新しいインスタンスを作成します。 Brightcove Player 通常は自動的に呼び出されます。 <video-js> タグを使用してください。

    • 2〜3行目:変数を宣言します player、そして video-js 要素。
    • 4-5行:JavaScriptを使用する setAttribute() メソッドを設定する data-accountdata-player。 これは、分析やその他のサービスの追跡に重要です。
    • Line 6:JavaScriptを使用する setAttribute() メソッドを使用してビデオIDを設定します。
    • ライン9: bc() 初期化するメソッド player.
    • 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行目:変数を宣言します player、そして video-js 要素。
    • 4-5行:JavaScriptを使用する setAttribute() メソッドを設定する data-accountdata-player。 これは、分析やその他のサービスの追跡に重要です。
    • ライン8: bc() 初期化するメソッド player.
    • ライン10: src のために player。 それは、 非常に重要な 両方を設定する 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 オン player

    なんらかの理由であなたが id あなたと player、次のコードを使用してインスタンス化を遅らせることができます。

    • 3〜4行目:変数を宣言します player、そして video-js 要素。
    • 7-8行:JavaScriptを使用する setAttribute() メソッドを設定する data-accountdata-player。 これは、分析やその他のサービスの追跡に重要です。
    • Line 9:JavaScriptを使用する setAttribute() メソッドを使用してビデオIDを設定します。
    • ライン12: bc() 初期化するメソッド player.
    • 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行目:変数を宣言します player、そして video-js 要素。
    • 7-8行:JavaScriptを使用する setAttribute() メソッドを設定する data-accountdata-player。 これは、分析やその他のサービスの追跡に重要です。
    • ライン11: bc() 初期化するメソッド player.
    • ライン13: src のために player。 それは、 非常に重要な 両方を設定する 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> 

    SSAI広告フェイルオーバーを使用したCSAI

    広告フェイルオーバーをオンにすると、 Brightcove Player ブラウザに広告ブロッカーが存在するかどうかを検出します。 そうでない場合は、クライアント側の広告(CSAI)が再生されます。 広告ブロッカーが検出された場合、 player サーバーサイド広告(SSAI)を自動的にリクエストします。 詳細については、 SSAI:広告ブロックの検出と自動フェイルオーバー の資料をご参照ください。

    デフォルトでは、 bc() メソッドは、 player すぐに初期化します。 で広告フェイルオーバーを使用する場合 bc() メソッド、あなたは待つ必要があります player 広告ブロッカーが存在するかどうかを確認します。 これは、次のコードで実行できます。

    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>

    ページの最終更新日:28年2020月XNUMX日