bc () と getPlayer () メソッドを使用する

はじめに

Brightcove Player で開発を行う際の基本的な要件は、プレーヤーへの参照を取得することです。これを実行するためのベストプラクティスは、Brightcove Player 6.x のライフサイクルを通じて変わりました。以下は、従うべきベストプラクティスです (各箇条書きの詳細については、このドキュメントの後半を参照してください)。

• <video>タグのバージョンを使用しているときにプレーヤーへの参照を取得するには、次のいずれかの操作を行います。
  • v6.16.0+ videojs.getPlayer()メソッドを使用します。
  • v6.16.0 の前に、videojs()メソッドを使用します。
• アドバンス (ページ内埋め込み) プレーヤーの実装を使用する場合、ベストプラクティスは次のとおりです。
  • v6.11.0+ <video-js>タグを使用します。
  • v6.11.0より前は、<video>タグを使用します。
• ページ上でプレーヤーを手動でインスタンス化する場合は、bc()メソッドを使用します。このメソッドはプレーヤーへの参照を生成します。

getPlayer()対videojs()

何時も Brightcove Player で開発を行っていれば、myPlayerプレイヤーへの参照を取得して変数に格納するために、次のようなコードが使用されていることがほとんど分かります。

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

v6.16.0以降を使用している場合は、player.getPlayer() APIをよりクリーンに使い、推奨されるベストプラクティスとしてここに表示:

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

video-jsvideoタグとタグ

Brightcove Player v6.11.0 以降では、<video-js><video>オーバーを使用するのがベストプラクティスです。その理由は次のとおりです。

• を使用すると<video-js>、<video>要素で取得できるネイティブコントロールの問題のフラッシュを防ぐことができます。この例は、Chromeバージョン67以降です。Chrome では、<video>タグが Brightcove Player に変換されるまで、壊れた動画アイコンが一時的に表示されます。アイコンは次のように表示されます。

  

• ビデオクラウド以外のメディアを使用する場合など、場合によっては、<video-js>プレイヤーは初期化プロセスをより細かく制御できます。これにより、<video>要素に関連付けられた自動ブラウザ動作を防ぐことができます。

bc()メソッドの詳細

bc()このメソッドは、選択した時点でプレイヤーをインスタンス化するために使用されます。Player のインスタンス化の遅延に関するドキュメントでは、ユースケースと実装について説明します。Brightcove Playerのサンプル:垂直ボリュームコントロールは、bc()ボリュームコントロールの方向を垂直に変更する方法の別の使用方法を示しています。垂直方向は、プレーヤーがインスタンス化される前に実行する必要があります。

メソッドの構文は次のとおりです。

  bc(id,options)

どこ:

• id :
  • 説明:ビデオ要素またはビデオ要素 ID
  • データ型:文字列|要素
  • 必須:真
• options :
  • 説明:設定を提供するオプションオブジェクト
  • データ型:オブジェクト
  • 必須:false
• このメソッドは Brightcove Player インスタンスを返します。

たとえば、video-js次のタグと JavaScript を使用してプレーヤーを構成できます。

  <video-js id="myPlayerID"
     data-embed="default"
     data-application-id
     class="video-js"
     width="640" height="360"
     controls></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  
  <script type="text/javascript">
    // +++ Define the player options +++
    var options = {
      controlBar: {
        volumePanel: {
          inline: false,
          vertical: true
        }
      }
    };
  
    // +++ Add the player attributes +++
    var myPlayerEl = document.getElementById("myPlayerID");
    myPlayerEl.setAttribute('data-account', 1752604059001);
    myPlayerEl.setAttribute('data-player', 'default');
    myPlayerEl.setAttribute('data-video-id', 5557662144001);
  
    // +++ Create the player +++
    bc(myPlayerEl, options);
  </script>

通常のプレーヤー構成オプション ( Player Configuration Guide に詳述 ) の内、bc()メソッドでは次のオプションを使用できます。