RequireJS と Brightcove Player

このトピックでは、JavaScript ファイルおよびモジュール ローダーである RequireJS を Brightcove Player と組み合わせて使用する方法について説明します。RequireJS は、複数の JavaScript スクリプトを使用する際の依存関係の管理を支援します。Brightcove Player は、プレーヤーごとに独自のスクリプト（index.min.js ファイル）を持っているため、本ドキュメントでは、RequireJS の実装で Brightcove Player を使用するためのコードを提供します。

Brightcove Player の初期化

以下のコードは、RequireJS を使用して Brightcove Player を実装する方法を示しています。主なポイントは次の 3 点です。

  1. このコードでは、コールバックが呼び出される前にプレーヤーが初期化されることを保証しています。
  2. on() および play() メソッド（36～38 行目）の使用は、あくまでデモンストレーション目的であり、プレーヤーの利用に必須ではありません。これら 3 行のコードは、Brightcove Player の API を使用し始める位置を示しているだけです。
  3. ハイライトされているコードは、Brightcove Player に関連する部分です。
      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
        <style>
          .video-js {
            height: 344px;
            width: 610px;
          }
        </style>
      </head>
      
      <body>
      
        <video-js id="myPlayerID"
          data-video-id="4690057979001"
          data-account="1507807800001"
          data-player="default"
          data-embed="default"
          controls></video-js>
      
        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>
        <script>
          require.config({
            'paths': {
              'bc': 'https://players.brightcove.net/1507807800001/default_default/index.min'
            },
            waitSeconds: 30
          });
      
          require(['bc'], function() {
            var myPlayer = videojs.getPlayers().myPlayerID;
            myPlayer.on('loadstart', function(){
              myPlayer.play();
            })
          });
        </script>
      
      </body>
      
      </html>

匿名モジュールの使用

上記のコードで確認したとおり、RequireJS を Brightcove Player v6.x と組み合わせて使用する場合、bc という名前のモジュールが作成されます。RequireJS が推奨する方法は、匿名の AMD モジュールを提供することです。これにより、複数の Brightcove Player をより簡単に組み込むことができます。モジュールはデフォルトで匿名に設定することが可能です。Brightcove では、このデフォルトを有効にするためのプレーヤー設定変更を強く推奨しており、同時にプレーヤーのコンソール警告も削除されます。必要な設定変更は、プレーヤー設定に "require_js_anonymous": true を指定することです。この更新を行うための curl コマンドは以下のとおりです。

      curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request PATCH \
        --data '{
          "require_js_anonymous": true
        }' \
        https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

匿名 RequireJS モジュールを有効にせずにコンソール警告のみを削除したい場合は、次に示すように "require_js_anonymous": false を設定してください。

      curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request PATCH \
        --data '{
          "require_js_anonymous": false
        }' \
        https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

curl を使用してプレーヤー設定を変更する方法の詳細については、ステップ バイ ステップ: Player 管理 ドキュメントを参照してください。