入門
このステップバイステップのドキュメントでは、次のタスクを実行します。
- プレーヤーを作成する
- ビデオを自動再生するようにプレーヤーを更新します
- プラグインを追加してプレーヤーをカスタマイズする
- プレーヤーの構成を表示する
入門
このステップバイステップのドキュメントが採用するアプローチは、curlステートメントを使用してPlayer ServiceAPIと通信することです。curlツールは、URL構文でデータを転送するためにコマンドラインで使用されます。カールの詳細については、次のURLから入手できます。 http://curl.haxx.se。
簡単にするために、このステップバイステップのドキュメントで使用するようにcurlを使用する必要はありません。' 酒。もちろん、お気に入りの言語を使用してAPIと通信することもできます。チェックしてくださいプレーヤー管理サンプルのセットアップこれは、基本認証、AJAX、JavaScriptを使用して、プレーヤーの作成、すべてのプレーヤーの表示、プレーヤーの削除などの基本的なタスク用のミニアプリを作成する方法を示しています。
APIの使用を開始する前に、いくつかの準備手順を実行する必要があります。これらは：
- Studioにログインします。複数のアカウントをお持ちの場合は、ドロップダウンを使用して、新しいプレーヤーを作成するアカウントを選択します。資格情報システムが正しく機能するには、このアカウントの管理者権限が必要です。ユーザーが管理者権限を持っているかどうかわからない場合は、[ユーザー設定]ページに移動して、ユーザーとその役割が一覧表示されていることを確認してください。
- Studioで、選択したことを確認してくださいホームホームモジュールのリストから。ページの左上隅、アカウント名のすぐ下で、あなたをコピーすることができますアカウントID。
- コマンドラインで次のように入力して、アカウントID値を環境変数に割り当てます。
export ACCOUNT_ID=YourAccountID - 認証は、curlステートメントの一部としてアカウントの電子メールアドレスを指定することによって処理され、APIはパスワードの入力を求めます。電子メールアドレスは頻繁に使用されるため、その値も環境変数に割り当てます。
export EMAIL=YourEmailAddress
これで、APIの使用を開始する準備が整いました。
プレーヤーを作成する
これで、Player ManagementAPIを呼び出してプレーヤーを作成できます。このAPI呼び出しについては、Player Management APIの概要資料。次のcurlステートメントをコピーしてコマンドラインに貼り付けることをお勧めします。
次の手順は、プレーヤーの作成に役立ちます。
- 最初のcurlステートメントはプレーヤーを作成し、名前と説明を割り当てます。このステートメントをコマンドラインに貼り付けて、を押した後 入力、パスワードの入力を求められます。
curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request POST \ --data '{ "name": "My New Player Name v2", "description": "My new player description" }' \ https://players.api.brightcove.com/v1/accounts/{account_id}/playersサーバーが応答データをJSON形式で返すことがわかります。
{ "id": "S1qN4xeG7", "url": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html", "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>", "embed_in_page": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed", "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html", "preview_embed_in_page": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed", "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>" } - 次の値のいずれか（またはすべて）を使用してプレーヤーを表示します（この時点では、プレーヤーにビデオはありませんが、Studioを使用して新しく作成したプレーヤーを使用してビデオを公開できます）。
- をコピーします
urlあなたのプレーヤーを見るためにブラウザに。 - をコピーします
embed_codeHTMLページに移動して、プレーヤーをiframeで表示します。これが正しく機能するためには、iframeを含むページが実際のHTTPサーバーから提供される必要があります。 - ザ・
embed_in_page機能の使用法については、高度な（ページ内の）埋め込みコードで使用可能なオプション資料。
- をコピーします
ビデオクラウドビデオ
もちろん、VideoCloudライブラリのビデオを使用してプレーヤーを作成することもできます。を使用する代わりにmedia JSONデータのセクションでは、video_cloud セクション。以下の curl ステートメントは、Video Cloud 動画の ID を使用したプレーヤーの作成を示しています。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request POST \
--data '{
"name": "Video Cloud CURL 10 March",
"configuration": {
"video_cloud": {
"video": "4093372393001"
}
}
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players
応答は、を使用してプレーヤーを作成するときの応答と論理的に同等です。メディア/ソース/ src上に示すように。
{
"id": "HJyMlHiuZ",
"url": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html",
"embed_code": "<iframe src="//players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>",
"embed_in_page": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/in_page.embed",
"preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html",
"preview_embed_code": "<iframe src="//preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>"
}
返されたURL値を参照してプレーヤーの構成を確認し、 index.htmlにconfig.json。上記のcurlステートメントによって作成されたプレーヤーの場合、次のように表示されます。
{
"account_id": "1507807800001",
"compatibility": true,
"embed_id": "default",
"player": {
"template": {
"name": "single-video-template",
"version": "6.5.0"
}
},
"player_id": "HJyMlHiuZ",
"player_name": "Video Cloud CURL 10 March",
"updated_at": "2017-08-23T17:48:55.622Z",
"video_cloud": {
"policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT",
"video": "4093372393001"
}
}
ザ・policy_key プレーヤーの構成に自動的に追加されます。これはPolicyAPIを使用して作成され、さまざまな動画にアクセスするためにプレーヤーに特別な制限を設けることができます。つまり、ポリシーキーは、どのビデオをいつ表示できるかを制御します。
プレーヤーを更新する
これで、プレーヤーを作成するための基本を実行しました。次に、プレーヤーの簡単な更新を行う方法を学習します。この場合、ブラウザで許可されている場合は、プレーヤーでビデオを自動再生するようにプレーヤーを設定します。
- プレーヤーの作成から返されたJSONで
id値が表示されました。これをにコピーしますPLAYER_ID環境変数。export PLAYER_ID=YourPlayerID - プレーヤーを更新するには、HTTPを使用します
PATCH方法。プレーヤーを更新するためのデータを送信します。を設定しますautoplayオプションtrue。次のcurlステートメントをコピーして貼り付けて実行します。curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request PATCH \ --data '{ "autoplay": true }' \ https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration - サーバーが以下を含むデータを返すことを確認してください
id、preview_urlそしてpreview_embed_code次のJSON形式の値：{ "id": "S1qN4xeG7", "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html", "preview_embed_in_page": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed", "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>" } - いずれかを使用してください
preview_urlまたはpreview_embed_codeプレーヤーの構成の変更を確認するための値。自動再生がtrueになっていることがわかります。 - 次に、プレーヤーを公開して、ユーザーが表示できる正しい場所にプレーヤーをプッシュします。次のコマンドを入力します。
curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request POST \ https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publishプレーヤーが公開されると、プレビューバージョンとは異なるプレーヤーが作成されます。公開されたバージョンは、次の点でプレビューバージョンとは異なります。
- JavaScriptとCSSは縮小され、連結され、プレーヤーに直接インライン化されます。
- ポスター画像の低解像度バージョンが生成され、ページにインライン化されて、リクエストのセットアップ時間が長いネットワーク（セルラーデータネットワーク）での読み込み時間が改善されます。
- 以前のバージョンのプレーヤーは保存されるため、アップデートの公開後に問題が発見された場合に回復できます。
- プレーヤーの公開からのJSON応答が次のように表示されることを確認してください。
{ "id": "S1qN4xeG7", "url": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html", "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>", "embed_in_page": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed" } - プレーヤーの実装の1つを使用して、公開されたプレーヤーが正しく機能していることを確認します。
プレーヤーをカスタマイズする
プラグインを使用してプレーヤーをカスタマイズできます。プレーヤーに既存のプラグインを含める方法や、で独自のプラグインを作成する方法を学ぶことができます。ステップバイステップ：プラグイン開発。
この場合、非常に単純な既存のプラグインを使用して、ビデオにテキストメッセージをオーバーレイします。以下は、HTML段落タグを作成するプラグインのコードです。注：クラス名とテキストが段落に割り当てられてから、既存のプレーヤーに追加されます。このプラグインはあなたの便宜のためにすでに存在し、にあります//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js。
videojs.registerPlugin('firstPlugin', function() {
var player = this,
overlay = document.createElement('p');
overlay.className = 'vjs-overlay';
overlay.innerHTML = "First Plugin Working!";
player.el().appendChild(overlay);
});
この特定の例では、黒い背景に黒いテキストが表示されないように、段落のスタイルを設定する必要があります。以下は、段落のクラス名に適用されるスタイルです。このスタイルシートは、便宜上すでに存在しており、次の場所にあります。 //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css。
.vjs-overlay {
background-color: #333333;
color: white;
font-size: 2em;
padding: 5px;
position: absolute;
top: 100px;
left: 20px;
width: 150px;
}
curlステートメントを使用してビデオソースとポスター画像を割り当てるのと同じように、curlステートメントを使用してプレーヤーに次のことを伝えます。
- プラグインのコードを含むJavaScriptファイルの場所
- スタイルシートの場所
- プレーヤーで使用されるプラグイン名
- 次のcurlステートメントを使用して、プラグインを機能させます。
curl\ --header "Content-Type: application/json"\ --user $EMAIL\ --request PATCH\ --data '{ "scripts": [ "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js" ], "stylesheets": [ "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css" ], "plugins": [{ "name": "firstPlugin" }] }'\ https: //players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration - 次のcurlステートメントを使用して、更新されたプレーヤーを公開します。これは、前のセクションでプレーヤーを公開するために使用したものと同じ公開コードです。
curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request POST \ https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publish - 返されたURLをコピーして参照します。プラグインが機能していることがわかり、プラグインのテキストが表示されます。
プラグインテキスト
プラグインがPlayerManagement APIを使用してプレーヤーに追加されると、Brightcoveが提供するプラグインであれ、作成したカスタムプラグインであれ、プラグインはプレーヤーコード自体の一部になります。
ディスプレイ構成
実行した作業をデバッグおよび確認するには、プレーヤーの構成を表示すると役立つことがよくあります。
- これを行うには、
GETとの方法configurationURL。curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request GET \ https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration - JSON構成の応答が次のようになっていることを確認してください。
{ "media": { "poster": { "highres": "//solutions.brightcove.com/bcls/assets/images/Tiger.jpg" }, "sources": [{ "type": "application/x-mpegURL", "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8" }, { "type": "video/mp4", "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4" }] }, "compatibility": true, "video_cloud": { "video": "4093372393001", "policy_key": "BCpkADawqM3ugPRAtcx48_C4FjXiEiJORcRFnXkeL9siQUpauO_o7SaIhSnYvM24nUCeD74UFG1LMW8vtmaftsO1vYeeOn2iglfvEbG-c0PYwJ_zQCQGsvkrbgrNyEDvbEKjyrsQVXj0DOco" }, "player": { "template": { "name": "single-video-template", "version": "6.7.0" } }, "scripts": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"], "stylesheets": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"], "plugins": [{ "name": "firstPlugin" }] }
プレーヤーの構成を確認するもう1つの方法は、返されたURL値を参照して、 index.htmlにconfig.json。
配信システムAPI
Delivery System APIを使用すると、リポジトリと呼ばれるファイルのグループを管理および展開できます。これらのファイルは、RESTAPIおよびgitを介して管理されます。これらのAPIは、プレーヤーを作成または編集するときにほとんどの人が必要とするべきではありませんが、他の目的に使用するための非常に興味深いAPIのセットになる可能性があります。それらを試してみたい場合は、ここでそうしてください。実践的な紹介については、ステップバイステップ：デリバリーシステム資料。