プレーヤー／プラグインのバージョンテスト
はじめに
Brightcove プレーヤーのプラグインは、自作のものでも、Brightcove が提供するものでも使用できます。このドキュメントでは、次の 3 つのテスト方法を紹介します。
- Studio を使用してプレーヤーを作成し、プラグインと設定を追加する方法。
- Studio を使用してプレーヤーを作成し、その後 HTML 内でプラグインをプログラム的に追加する方法。
- Player Management API と curl を使用する方法。 curl ツールを使用すると、コマンドラインから Player Management API を利用できます。curl の使用方法については、クイックスタート：Player Management ドキュメントを参照してください。 Postman などの HTTP クライアントツールにも対応しています。 この方法の利点は、Studio で利用できるバージョンだけでなく、任意のプレーヤーバージョンを選択してテストできる点です。
Brightcove プラグインのプレリリース版をテストする
Brightcove は、一部のプラグインのプレリリース版を提供することがあります。このドキュメントの手順を使用することで、Brightcove プレーヤーおよび他のプラグインがそのプレリリース版と互換性があるか確認できます。
Studio を使用する
以下の手順では、Studio を使用してプレーヤーを作成し、プラグインを追加してテストする方法を説明します。
- PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを探します。
- プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
- 左側のナビゲーションメニューで Plugins をクリックします。
- Add a Plugin をクリックし、Custom Plugin を選択します。
- Plugin Name に、使用したいプラグインの名前を入力します。
- 使用したいプラグインの JavaScript URL を入力します。
- 使用したいプラグインの CSS URL を入力します。
- 必要に応じて、プラグインの設定オプションを入力します。
- Save をクリックします。
- プレーヤーを公開するには、Publish & Embed > Publish Changes をクリックします。
- 開いているダイアログを閉じるには、Close をクリックします。
これで、新しく設定したプレーヤーを使用して動画を公開し、プラグインのテストを行う準備ができました。
プラグインをプログラムで追加する
このセクションでは、Studio でプレーヤーを作成し、その後 HTML コードを使用してプラグインを追加する方法を説明します。
- Studio で PLAYERS モジュールを選択します。
- ドロップダウンから希望のバージョンを選択して、新しいプレーヤーを作成します。
- MEDIA モジュールに移動し、動画を公開します。
- Advanced（インページ埋め込み）実装コードをコピーします。
- プレーヤーコードを 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 で利用可能なバージョンに限らず、任意のプレーヤーバージョンを選択できる点です。
プレーヤーを作成する
指定したバージョンのプレーヤーを正常に作成できました。
テスト用ページを作成する
プレーヤーを作成したら、そのプレーヤーでプラグインをテストします。本セクションの手順では、上級（Advanced）プレーヤーコードの実装を取得し、プラグインと併せてテストする方法を案内します。
-
Step-by-Step: Player Management ドキュメントで説明されているとおり、以下の環境変数を設定します。
- あなたのメールアドレス
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>Testing Player and Plugin Versions</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> //Load my plugin source JavaScript <script src="my_plugin_source.js"></script> //Load my plugin into the player <script type="text/javascript"> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this; myPlayer.myPluginName(); }); </script> ... - これで、プレーヤーのテストや、必要に応じた対話的なデバッグが可能です。
プラグインをプレーヤーへ恒久的に追加する
すべてが正常に動作し、そのプレーヤーを使用するたびにプラグインを含めたい場合は、curl と Player Management API を使用してプラグインをプレーヤーに割り当てます。以下は例であり、実際にはあなたのプラグイン名と設定オプションを指定してください。
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