bc() メソッドと getPlayer() メソッドの使用

はじめに

Brightcove Player を用いた開発における基本要件の 1 つは、プレーヤーへの参照を取得することです。Brightcove Player 6.x の提供期間を通して、この実施方法のベストプラクティスは変化してきました。以下に示すベストプラクティスに従ってください（各項目の詳細は本ドキュメントの後半で説明します）。

• <video> タグのバージョンを使用してプレーヤーへの参照を取得する場合は、次のいずれかを行います。
  • v6.16.0+：videojs.getPlayer() メソッドを使用します。
  • v6.16.0 より前：videojs() メソッドを使用します。
• Advanced（in-page embed） のプレーヤー実装を使用する場合のベストプラクティスは次のとおりです。
  • 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+ を使用している場合は、API の利用方法としてより簡潔であり、推奨されるベストプラクティスとして、次のように player.getPlayer() を代わりに使用します。

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

video-js タグと video タグの比較

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

• <video-js> を使用すると、<video> 要素で発生し得る「ネイティブ コントロールが一瞬表示される」問題を回避できます。例として Chrome 67 以降では、<video> タグが Brightcove Player に変換されるまでの間、壊れた動画アイコンが一瞬表示されます。アイコンは次のように表示されます。

  

• Video Cloud 以外のメディアを使用する場合など、状況によっては <video-js> を使用することで、初期化プロセスに対するプレーヤー側の制御を強化できます。これにより、<video> 要素に関連付けられたブラウザの自動動作を抑止できます。

bc() メソッドの詳細

bc() メソッドは、任意のタイミングでプレーヤーをインスタンス化するために使用します。プレーヤーのインスタンス化を遅延する ドキュメントでは、ユースケースと実装方法を説明しています。また、Brightcove Player サンプル：縦向きの音量コントロール では、音量コントロールの向きを縦方向に変更する別の bc() メソッドの使用例を示しています。この変更は、プレーヤーのインスタンス化前に行う必要があります。

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

        bc(id,options)

ここで：

• id:
  • 説明：video 要素、または video 要素の ID
  • データ型：string|Element
  • 必須：true
• options:
  • 説明：設定を提供するための options オブジェクト
  • データ型：Object
  • 必須：false
• このメソッドは Brightcove Player インスタンスを返します

例えば、次の video-js タグに対して、プレーヤーを設定する JavaScript を用意できます。

        <video-js id="myPlayerID"
           data-embed="default"
           data-application-id=""
           controls=""
           width="640" height="360"></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>

通常のプレーヤー設定オプション（プレーヤー設定ガイドに詳細があります）のうち、bc() メソッドで使用できるのは次のとおりです。