はじめに
Brightcove Player プラグインは、独自の作品でも、ブライトコーブが提供するプラグインでもかまいません。テストには3つのオプションがあります。
- Studio を使用してプレーヤーを作成し、プラグインと設定を追加します。
- Studioを使用してプレーヤーを作成し、HTMLでプログラムでプラグインを追加します。
- プレーヤー管理 API とカールを使用する。カールツールは、プレーヤー管理 API を活用するためにコマンドラインで使用されます。カールの使用方法については、クイックスタートを参照してください。プレイヤー管理ドキュメント。 Postman のような HTTP クライアントツールに精通している場合は、それらも使用できます。この方法の利点は、Studioで利用可能なプレーヤーだけでなく、任意のバージョンのプレーヤーを選択できることです。
ブライトコーブプラグインのプレリリースをテストする
ブライトコーブは、特定のプラグインのプレリリースを提供することがあります。このマニュアルの手順に従って、Brightcove Player やその他のプラグインがプレリリースで動作することを確認できます。
スタジオを使用する
次の手順では、Studioを使用してプレーヤーを作成し、テスト用のプラグインをプレーヤーに追加するプロセスについて説明します。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
- [ プラグインを追加] をクリックし、[ カスタムプラグイン] を選択します。
- のためにプラグイン名目的のプラグインの名前を入力します。
- 目的のプラグインを入力しますJavaScript URL。
- 目的のプラグインの CSS URL を入力します。
- 必要なプラグインの設定オプションがあれば、入力します。
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開くダイアログを閉じるには、[ 閉じる] をクリックします。
これで、新しく設定されたプレーヤーを使用してビデオを公開し、プラグインをテストする準備ができました。
プログラムでプラグインを追加する
ドキュメントのこのセクションでは、Studioでプレーヤーを作成し、HTMLページのコードを使用してプラグインを追加します。
- Studio で、 PLARersモジュールを選択します。
- ドロップダウンから目的のバージョンを使用して、新しいプレーヤーを作成します。
- MEDIA モジュールに移動し、ビデオを公開します。
- 詳細設定 (ページ内埋め込み) 実装コードをコピーします。
- プレーヤーコードを HTML ページに貼り付けます。
- HTML
<link>
タグを使用して CSS ファイルへのパスを追加します。 - HTML
<script>
タグを使用して JavaScript ファイルへのパスを追加します。 - プレーヤーの準備ができたら、プラグインを呼び出し、任意のオプションを渡します。
- 以下に、必要なコードの一般的な概要を示します。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing a plugin</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 class="video-js" 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>
これで、このページを参照してプラグインをテストする準備が整いました。
カールとプレーヤー管理 API を使用する
ドキュメントのこのセクションでは、カールを使用し、プレーヤー管理 API を活用してプレーヤーでプラグインをテストする方法について説明します。このアプローチの利点は、Studioで利用可能なものだけでなく、あなたが望むプレーヤーの任意のバージョンを選択できることです。
プレーヤーを作成する
これで、指定したバージョンのプレーヤーが正常に作成されました。
テストページを作成する
あなたのプレーヤーが作成されたので、あなたはそれでプラグインをテストしたいでしょう。このセクションの手順は、高度なプレーヤーコードの実装を取得し、プラグインでテストするためのガイドです。
-
ステップバイステップで述べたように:Player Management ドキュメントでは、次の環境変数を設定します。
- あなたのメールアドレス
export EMAIL=YourEmailAddress
- アカウント番号
export ACCOUNT_ID=YourAccountID
- プレイヤーが作成されると、あなたのプレイヤーID
export PLAYER_ID=MyPlayerID
curlでは、前に変数を使用します$、 そのようです:
$EMAIL
- あなたのメールアドレス
- 名前の付いたプレーヤーを作成するには6人のプレイヤーバージョンを使用6.0.0次の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 webkitallowfullscreen mozallowfullscreen></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 webkitallowfullscreen mozallowfullscreen></iframe>" }
- プレーヤーが作成されたら、Studio に移動してプレーヤーを使用してビデオを公開できます。たとえば、アドバンスプレイヤーコードはこのようになりますが、もちろんアカウント情報を使用します。
<video-js data-video-id="5350958927001" data-account="1507807800001" data-player="B1JOH9o0e" data-embed="default" data-application-id class="video-js" controls width="640" height="360"></video-js> <script src="https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.min.js"></script>
- プレーヤーコードを HTML ページに配置します。
id
video
属性がタグに追加され、値が割り当てられていることに注意してください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 class="video-js" 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 class="video-js" 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 ステートメントは一例であり、特定の設定オプションとプラグイン名を追加する必要があります。
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