プレーヤー／プラグインのバージョンテスト

このトピックでは、特定のバージョンのプレーヤーを作成し、そのプレーヤーのバージョンでプラグインをテストする方法を学びます。

はじめに

Brightcove Player のプラグインは、独自に作成したもの、または Brightcove が提供するプラグインのいずれかです。テストには、次の 3 つの方法があります。

Studio を使用してプレーヤーを作成し、プラグインと設定を追加する方法。
Studio を使用してプレーヤーを作成し、その後 HTML 内でプログラム的にプラグインを追加する方法。
Player Management API と curl を使用する方法。 curl ツールは、コマンドラインで Player Management API を利用するために使用されます。 curl の使用方法については、クイックスタート：Player Management ドキュメントを参照してください。 Postman などの HTTP クライアントツールに慣れている場合は、それらを使用することもできます。この方法の利点は、Studio で利用可能なバージョンに限定されず、任意のプレーヤーバージョンを選択できる点です。

Brightcove プラグインのプレリリースのテスト

Brightcove では、特定のプラグインのプレリリース版を提供する場合があります。このドキュメントの手順を使用することで、Brightcove Player や他のプラグインがプレリリース版と正しく動作することを確認できます。

Studio を使用する

以下の手順では、Studio を使用してプレーヤーを作成し、テスト用にプラグインをプレーヤーへ追加するプロセスを説明します。

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
左側のナビゲーションメニューで プラグイン をクリックします。
プラグインの追加 をクリックし、カスタムプラグイン を選択します。
プラグイン名 に、使用するプラグイン名を入力します。
Brightcove のプレリリースプラグインをテストする場合、JavaScript および CSS の URL が提供されます。
使用するプラグインの JavaScript URL を入力します。
使用するプラグインの CSS URL を入力します。
必要に応じて、プラグインの設定オプションを入力します。
保存をクリックします。
プレーヤーを公開するには、公開と埋め込み > 変更の公開 をクリックします。
ダイアログを閉じるには、閉じる をクリックします。

これで、新しく設定したプレーヤーを使用して動画を公開し、プラグインをテストする準備が整いました。

プログラムでプラグインを追加する

このセクションでは、Studio でプレーヤーを作成し、その後 HTML ページ内のコードを使用してプラグインを追加します。

Studio で PLAYERS モジュールを選択します。
ドロップダウンから希望するバージョンを選択して、新しいプレーヤーを作成します。
MEDIA モジュールに移動し、動画を公開します。
Videoタグ（インページ埋め込み）の実装コードをコピーします。
プレーヤーコードを HTML ページに貼り付けます。
HTML の <link> タグを使用して、CSS ファイルのパスを追加します。
HTML の <script> タグを使用して、JavaScript ファイルのパスを追加します。
プレーヤーの準備ができたら、プラグインを呼び出し、必要なオプションを渡します。

必要なコードの一般的な構成は次のとおりです。

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>プラグインのテスト</title>
      <link href="//url_to_my_css/my.css" rel="stylesheet">
    </head>
    
    <body>
    
      <video-js id="myPlayerID"
        data-video-id="5350958927001"
        data-account="1507807800001"
        data-player="rJeuIHdbmW"
        data-embed="default"
        data-application-id=""
        controls=""></video-js>
      <script src="https://players.brightcove.net/1507807800001/rJeuIHdbmW_default/index.min.js"></script>
    
      <script src="//url_to_my_js/my.js"></script>
    
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this,
          options = {};
          options.prop1 = "value1";
          options.prop2 = "value2";
    
          myPlayer.pluginName(options);
        });
      </script>
    
    </body>
    
    </html>

これで、このページをブラウズしてプラグインをテストする準備が整いました。

curl と Player Management API を使用する

このセクションでは、curl を使用して Player Management API を活用し、プレーヤーでプラグインをテストする方法を説明します。この方法の利点は、Studio で利用可能なバージョンに限定されず、任意のプレーヤーバージョンを選択できる点です。

プレーヤーを作成する

これで、指定したバージョンのプレーヤーが正常に作成されました。

テストページを作成する

プレーヤーが作成できたら、そのプレーヤーでプラグインをテストします。このセクションの手順では、Videoタグプレーヤーコードの実装を取得し、プラグインと組み合わせてテストする方法を案内します。

ステップ・バイ・ステップ：プレーヤー管理ドキュメントで説明されているように、以下の環境変数を設定します。
- メールアドレス
```
      export EMAIL=YourEmailAddress
```
- アカウント番号
```
      export ACCOUNT_ID=YourAccountID
```
- プレーヤー作成後に取得するプレーヤー ID
```
      export PLAYER_ID=MyPlayerID
```
curl では、$ を付けた変数として使用します。例: $EMAIL

バージョン 6.0.0 を使用して six-oh-player という名前のプレーヤーを作成するには、以下の curl コマンドをターミナルに貼り付けます（下のスクリーンショットでは黄色で強調表示されています）。

      curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request POST \
        --data '{
            "name": "six-oh player",
            "configuration": {
              "player": {
                "template": {
                  "name": "single-video-template",
                  "version": "6.0.0"
                }
              }
            }
          }' \
          https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players

Enter キーを押すと、Brightcove のパスワード入力を求められるので入力します（下のスクリーンショットでは赤色で強調表示されています）。

最後に、Player Management API から、作成したプレーヤーに関する情報が JSON 形式で返されます（下のスクリーンショットでは緑色で強調表示されています）。

整形したプレーヤーの JSON は次のとおりです。

      {
        "id": "B1JOH9o0e",
        "url": "https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.html",
        "embed_code": "<iframe src='//players.brightcove.net/1507807800001/B1JOH9o0e_default/index.html' allowfullscreen allow='encrypted-media'></iframe>",
        "embed_in_page": "https://players.brightcove.net/1507807800001/B1JOH9o0e_default/in_page.embed",
        "preview_url": "https://preview-players.brightcove.net/v1/accounts/1507807800001/players/B1JOH9o0e/preview/embeds/default/master/index.html",
        "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v1/accounts/1507807800001/players/B1JOH9o0e/preview/embeds/default/master/index.html' allowfullscreen allow='encrypted-media'></iframe>"
      }

プレーヤーが作成できたら、Studio に移動し、このプレーヤーを使用して動画を公開します。たとえば、Advanced プレーヤーコードは次のようになります（実際にはご自身のアカウント情報を使用してください）。

      <video-js data-video-id="5350958927001"
        data-account="1507807800001"
        data-player="B1JOH9o0e"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video-js>
      <script src="https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.min.js"></script>

次に、このプレーヤーコードを HTML ページに配置します。ここでは、video タグに id 属性が追加され、値として myPlayerID が設定されている点に注意してください。

      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>プレーヤーとプラグインのバージョンテスト</title>
      </head>
      
      <body>
      
        <video-js id="myPlayerID"
          data-video-id="5350958927001"
          data-account="1507807800001"
          data-player="B1JOH9o0e"
          data-embed="default"
          data-application-id=""
          controls=""
          width="640"
          height="360"></video-js>
        <script src="https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.min.js"></script>
      
      </body>
      
      </html>

ここでプラグインをテストします（プラグイン名を myPluginName と仮定します）。最も簡単な方法は、コードをローカルに保存し、script タグを使ってプラグインを読み込むことです。その後、プラグインを呼び出してロードします。以下では、両方の手順に該当するコードをハイライトしています。例を示します。

      ...
        <video-js data-video-id="5350958927001"
          data-account="1507807800001"
          data-player="B1JOH9o0e"
          data-embed="default"
          data-application-id=""
          controls=""
          width="640"
          height="360"></video-js>
        <script src="https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.min.js"></script>
      
        // プラグインの JavaScript ソースを読み込む
        <script src="my_plugin_source.js"></script>
      
        // プラグインをプレーヤーに読み込む
        <script type="text/javascript">
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
            myPlayer.myPluginName();
          });
        </script>
      ...

これでプレーヤーをテストでき、必要に応じて対話的にデバッグできます。

プラグインをプレーヤーに恒久的に追加する

すべてが正しく動作し、そのプレーヤーが使用されるたびにプラグインを含めたい場合は、 curl と Player Management API を使用してプラグインをプレーヤーに割り当てることができます。以下の curl ステートメントは例であり、実際にはプラグイン名や固有の設定オプションを追加する必要があります。

      curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request PATCH \
        --data '{
          "plugins": [{
            "name": "myPluginName",
            "options": {
              "param1": "1",
              "param2": "2"
            }
          }],
          "scripts": [
            "http://domain.com/wherever/myplugin.js"
          ],
          "stylesheets": [
            "http://domain.com/wherever/myplugin.css"
          ]
        }' \
        https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

プラグインを追加した後は、Studio に移動してプレーヤーを公開する（公開が必要な状態としてマークされます）か、または以下の curl コマンドを使用してプレーヤーを公開します。

      curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request POST \
        https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish