入門
プレーヤーの設定で設定できるプロパティは、 account_id で始まる以下のとおりです (左側のナビゲーションにリストされています)。また、このマニュアルでは、プロパティ値を表示および構成する方法についても説明します。
設定の表示
プレイヤーの設定を表示する方法は多数あります。このセクションで詳しく説明します。
スタジオを使用する
Studio を使用して、プレーヤーの JSON 設定を表示できます。次の手順では、プロセスの詳細を説明します。
- PLAYERS モジュールを開き、構成を表示するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ JSON エディタ ] をクリックします。
- プレイヤーの設定は、次のようになります。
を使用してブラウジングconfig.json
新しい Brightcove プレーヤーの設定のインスタンスは、JSON ファイルに保存されます。この JSON ファイルまたはその一部は、いくつかの方法で確認できます。
プレイヤー構成を表示する方法の 1 つは、プレーヤーの URL index.html
をで終わるからに変更することですconfig.json
。例は次のとおりです。
http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/config.json
プレーヤー設定のプロパティの中には、次の項目を定義するものがあります。
- プレイヤーの名前とバージョン
- プレーヤーが再生するビデオ
- プレイヤーが属するアカウント
- プレイヤーのID
- プレイヤーが使用できるプラグインと、プラグインコードの場所の URL
- 動画再生前に表示するポスター
ステップバイステップからプレーヤー用のプレーヤ設定ファイルの例:プレイヤー管理, 次の通りです:
{
"player": {
"template": {
"version": "0.9.5",
"name": "single-video-template"
}
},
"media": {
"poster": {
"highres": "http://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
},
"sources": [{
"type": "application/x-mpegURL",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
}, {
"type": "video/mp4",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
}]
},
"scripts": [
"http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"
],
"stylesheets": [
"http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"
],
"plugins": [{
"name": "firstPlugin"
}],
"account_id": "1507807800001",
"player_id": "54ade2f3-3b51-4a6b-bc87-32b9a0b81384",
"embed_id": "default"
}
{
"media": {
"poster": {
"highres": "http://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
},
"sources": [{
"type": "application/x-mpegURL",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
}, {
"type": "video/mp4",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
}]
},
"video_cloud": {
"video": "4093372393001",
"policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT"
},
"player": {
"template": {
"name": "single-video-template",
"version": "6.5.0"
}
},
"scripts": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
"stylesheets": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
"plugins": [{
"name": "firstPlugin"
}]
}
{player_id}/configuration
エンドポイントでGET
HTTP GET
メソッドを使用して、表示されている同じ情報を取得できます。使用するGET
とともに/{player_id}/configuration
取得できるエンドポイント 公開されたプレーヤーの 構成情報。curl ステートメントの例と、取得された JSON を以下に示します。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request GET \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
{
"player": {
"template": {
"version": "0.9.5",
"name": "single-video-template"
}
},
"media": {
"poster": {
"highres": "http://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
},
"sources": [{
"type": "application/x-mpegURL",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
}, {
"type": "video/mp4",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
}]
},
"scripts": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
"stylesheets": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
"plugins": [{
"name": "firstPlugin"
}]
}
{
"media": {
"poster": {
"highres": "http://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
},
"sources": [{
"type": "application/x-mpegURL",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
}, {
"type": "video/mp4",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
}]
},
"video_cloud": {
"video": "4093372393001",
"policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT"
},
"player": {
"template": {
"name": "single-video-template",
"version": "6.5.0"
}
},
"scripts": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
"stylesheets": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
"plugins": [{
"name": "firstPlugin"
}]
}
{player_id}
メソッドエンドポイントの取得
HTTP GET
で使用される方法/{player_id}
エンドポイントは、完全なプレーヤー情報を取得する方法です。このアプローチは、あなたが見たばかりのプレーヤー構成のスーパーセットを提供します。このエンドポイントは、設定情報を「1 レベルアップ」で表示し、プレビュー版と公開済みのプレーヤーバージョンの両方の現在の設定情報を含むと考えることができます。curl ステートメントの例と、取得された JSON を以下に示します。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request GET \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}
{
"id": "HJyMlHiuZ",
"name": "Video Cloud CURL 10 March",
"branches": {
"preview": {
"configuration": {
"plugins": [{
"name": "firstPlugin"
}],
"stylesheets": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
"scripts": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
"player": {
"template": {
"version": "6.5.0",
"name": "single-video-template"
}
},
"video_cloud": {
"policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT",
"video": "4093372393001"
},
"media": {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8",
"type": "application/x-mpegURL"
}, {
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
"type": "video/mp4"
}],
"poster": {
"highres": "http://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
}
}
},
"video_cloud": {
"aspect_ratio_height": "9",
"aspect_ratio_width": "16",
"video_id": "4093372393001",
"poster_image_url": "http://brightcove.vo.llnwd.net/e1/pd/1507807800001/1507807800001_4093546643001_7c09c5bb-7643-414d-81da-847a7e5e3654-AWSAccessKeyId-AKIAJWBBMGHEBQ6SISMA-Expires-1425580379-Signature-h4xCk8Zf9xH-2Be779r9ltwGI7Jzg-3D-vs.jpg?pubId=1507807800001&videoId=4093372393001"
},
"updated_at": "2017-08-23T18:09:52.590Z",
"template_updated_at": "2017-08-23T17:48:55.615Z",
"preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html"
},
"master": {
"configuration": {
"media": {
"poster": {
"highres": "http://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
},
"sources": [{
"type": "application/x-mpegURL",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
}, {
"type": "video/mp4",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
}]
},
"video_cloud": {
"video": "4093372393001",
"policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT"
},
"player": {
"template": {
"name": "single-video-template",
"version": "6.5.0"
}
},
"scripts": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
"stylesheets": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
"plugins": [{
"name": "firstPlugin"
}]
},
"video_cloud": {
"poster_image_url": "http://brightcove.vo.llnwd.net/e1/pd/1507807800001/1507807800001_4093546643001_7c09c5bb-7643-414d-81da-847a7e5e3654-AWSAccessKeyId-AKIAJWBBMGHEBQ6SISMA-Expires-1425580379-Signature-h4xCk8Zf9xH-2Be779r9ltwGI7Jzg-3D-vs.jpg?pubId=1507807800001&videoId=4093372393001",
"video_id": "4093372393001",
"aspect_ratio_width": "16",
"aspect_ratio_height": "9"
},
"updated_at": "2017-08-23T18:10:11.843Z",
"template_updated_at": "2017-08-23T17:48:55.622Z",
"preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/master/embeds/default/master/index.html"
}
},
"created_at": "2017-08-23T17:48:55.615Z",
"accountId": "1507807800001",
"embed_count": 1,
"url": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html"
}
{
"account_id": "1507807800001",
"branches": {
"preview": {
"configuration": {
"plugins": [{
"name": "firstPlugin"
}],
"stylesheets": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
"scripts": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
"player": {
"template": {
"version": "1.5.0",
"name": "single-video-template"
}
},
"video_cloud": {
"policy_key": "BCpkADawqM3ClR-sni6Tc0sFppBHaE91MRyLjE8kUwQjOkXjmK-b2R9fN3IuOnRf_4uuV2LSFwT3eeKUxgYU75eT0c20JEnUKpKU6L-oyjn81zE_P1NF0HJBZiyXyqtHcAdvTpTb29d4S-BH",
"video": "3495887198001"
}
},
"video_cloud": {
"aspect_ratio_height": "14",
"aspect_ratio_width": "25",
"video_id": "3495887198001",
"poster_image_url": "http://brightcove.vo.llnwd.net/e1/pd/1507807800001/1507807800001_3495968128001_humbles-scrappy-statue2-vs.jpg?pubId=1507807800001"
},
"updated_at": "2014-10-23T14:33:21.107Z",
"preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/a90a8479-9831-46f6-9eab-90efc7fb9c6b/preview/embeds/default/master/index.html"
},
"master": {
"configuration": {
"video_cloud": {
"video": "3495887198001",
"policy_key": "BCpkADawqM3ClR-sni6Tc0sFppBHaE91MRyLjE8kUwQjOkXjmK-b2R9fN3IuOnRf_4uuV2LSFwT3eeKUxgYU75eT0c20JEnUKpKU6L-oyjn81zE_P1NF0HJBZiyXyqtHcAdvTpTb29d4S-BH"
},
"player": {
"template": {
"name": "single-video-template",
"version": "1.5.0"
}
},
"scripts": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
"stylesheets": ["http://solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
"plugins": [{
"name": "firstPlugin"
}]
},
"video_cloud": {
"poster_image_url": "http://brightcove.vo.llnwd.net/e1/pd/1507807800001/1507807800001_3495968128001_humbles-scrappy-statue2-vs.jpg?pubId=1507807800001",
"video_id": "3495887198001",
"aspect_ratio_width": "25",
"aspect_ratio_height": "14"
},
"updated_at": "2014-10-23T14:33:41.201Z",
"preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/a90a8479-9831-46f6-9eab-90efc7fb9c6b/master/embeds/default/master/index.html"
}
},
"id": "a90a8479-9831-46f6-9eab-90efc7fb9c6b",
"name": "1031+on+Oct+23",
"created_at": "2014-10-23T14:32:21.384Z",
"embed_count": 1,
"url": "http://players.brightcove.net/1507807800001/a90a8479-9831-46f6-9eab-90efc7fb9c6b_default/index.html"
}
名前/説明を設定する
プレーヤーの設定を変更するには、/{account_id}/players/{player_id}/configuration
エンドポイントを使用します。これはこのドキュメントで強調されています。ただし、/{account_id}/players/{player_id}
エンドポイントのみを使用して変更する 2 つのプロパティがあります。これらの2つのプロパティはname
そしてdescription
。
注: name
プレイヤーに入力した値は、player_name
設定を取得したときと同じように返されます。config.json
プレイヤープレビュー URL の最後に (プレイヤー管理 API name
を使用して設定を取得したときと同じように返されます)。しかし、name
プレーヤーを作成または更新するときに使用する必要があります。
最初のコードブロックは、name
プレイヤーのとを変更するcurlステートメントの例を示していますdescription
。JSON 応答では、プレイヤのプレビューバージョンが PATCH メソッドによって生成されたことが示されるため、最適化されたバージョンを取得するにはプレーヤーを公開する必要があります。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"name": "My New Player Name",
"description": "My new player description"
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
{
"id": "62da9b4d-b8aa-45d5-ba46-f77eac9c9059",
"preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/62da9b4d-b8aa-45d5-ba46-f77eac9c9059/preview/embeds/default/master/index.html",
"preview_embed_code": "<iframe src='//preview-players.brightcove.net/v1/accounts/1507807800001/players/62da9b4d-b8aa-45d5-ba46-f77eac9c9059/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>"
}
値の設定
HTTPメソッド呼び出しを発行する任意のツールを使用するか、またはを使用して、プレーヤー構成値を設定できます。 JSONエディタースタジオの一部ですプレイヤーモジュール。カールツールを使用し、ステップバイステップで示すステートメントの例も使用できます。プレイヤー管理およびAJAXの使用は多くのBrightcoveプレーヤーの例。
JSON エディタを使用した変更の例を次に示します。
プレイヤーの JSON 設定を編集したら、必ず変更を保存してください。
プロパティの設定
一部の構成プロパティはプレーヤー管理サービスによって設定され、変更できません。これらは次のとおりです。
- account_id
- player_id
- embed_id
以下に詳述する他のすべてのプロパティは変更可能です。
プロパティの詳細は以下のようになります。以下のリストを使用して、特定のプロパティにすばやくアクセスできます。
- account_id
- config_id
- failover
- application_id
- オートアドバンス
- 自動再生
- base_url
- ブレークポイント
- クロスオリジン
- css
- デバッガ
- ドック
- embed_id
- エラー
- フラッシュ
- fullScreenControl
- hls
- 非アクティブ
- 言語
- 言語
- ループ
- メディア
- ミュートされた
- picture_in_picture_control
- playback
- プレイヤー
- play_button
- player_id
- player_name
- プレイシンライン
- プレイリスト
- プラグイン
- プリロード
- query_string_to_window
- 繰り返す
- レスポンシブ
- スクリプト
- 皮膚
- スタイルシート
- techOrder
- バージョン
- cloud
- volume_オリエンテーション
- vttjs
- wait_for_ad_block_detect
account_id
プレーヤーに関連付けられた Video Cloud アカウント ID。この値は変更できません。
config_id
ad_config_id
information:
- データ型:文字列
- デフォルト:
undefined
- 動的デリバリー SSAI 広告設定ID。プレーヤー設定で設定できるだけでなく、iframe プレーヤーの場合は adconfigID クエリ文字列パラメーター、またはページ内プレーヤーの場合は data-ad-config-id 属性を使用して実行時に設定できます。これらのいずれかがプレイヤー構成内の任意の値を上書きします。
failover
ad_failover
information:
- データ型:ブール値
- デフォルト:
undefined
- 広告のフェイルオーバー動作を有効にするには、true に設定します。これは、次の要素に依存するマルチパート構成です。
- IMA3 プラグインと SSAI プラグインは両方ともプレーヤーで設定する必要があります。
ad_config_id
を利用できるはずです。そうでない場合、SSAI 広告は利用できません。
application_id
application_id
information:
- データ型:文字列
- デフォルト:
undefined
- アプリケーション ID は、メトリクスにおける 1 つのプレーヤーの複数の用途を区別するために使用されます。ユーザーには見えません。
オートアドバンス
autoadvance
information:
- データ型:文字列
- デフォルト:最初は有効になっていない
- プレイリストで使用し、プレイリストの自動アドバンスの動作を設定します。
詳細については、以下のプレイリストのセクションとプレイリスト API ドキュメントを参照してください。
自動再生
autoplay
information:
- データ型:ブールまたは文字列
- デフォルト:
false
- これが許可されているプラットフォームで、プレーヤーがすぐに再生を開始する必要があることを示します。
autoplay
がブール値に設定されている場合、ブラウザーのネイティブの自動再生動作が使用されます。次の 3 つの有効な文字列値のいずれかに設定されている場合、次のようになります。
play
:プレイヤーは手動でプレイを呼び出そうとします。muted
:プレイヤーは手動でプレイヤーをミュートし、プレイを呼び出します。any
:プレイヤーは最初にプレイを呼び出そうとします。失敗した場合は、プレイヤーをミュートしてプレイを呼び出します。
上記のいずれかが失敗した場合、自動再生が false に設定されているかのように「ビッグプレイボタン」が表示されます。
次に、autoplay
値を設定する 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
文字列値の使用例
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"autoplay": "muted"
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
ビデオを自動再生するには、複雑な状況になる可能性があります。詳細については、「自動再生に関する考慮事項」を参照してください。
base_url(IP制限の問題の場合)
北米以外で使用されている Brightcove Player で IP 制限を使用すると、問題が発生する可能性があります。Brightcove Player が Video Cloud アカウントから動画を読み込むように要求されると、このアドレスにあるカタログに接続します https://edge.api.brightcove.com/playback/v1/ 。
その Edge エンドポイントは、IP 制限の問題を引き起こす可能性のある方法で動作します。
- 北米内から Edge を押すと、Edge に直接ヒットし、Edge はユーザーの IP アドレスを認識します。IP 制限ホワイトリストに従って、カタログへのアクセスを許可または拒否できます。これは望ましい機能です。
- 北米外から Edge を押すと、ロードバランシング/ローカルキャッシング CDN の理由から Cloudfront を経由します。これにより、Edge はユーザーの IP ではなく Cloudfront IP を確認し、すべてのユーザーを拒否します。これは、Cloudfront がホワイトリストに含まれていないためです(Cloudfront を使用する人は誰でもアクセスできるため)。
この問題を解決するには、代替エッジエンドポイント edge-elb.api.brightcove.com を使用するようにプレーヤーを構成できます。この変更は、北米以外から IP 制限付きアカウントにアクセスする必要があるすべてのプレイヤーに対して行う必要があります。
実際の設定変更には、Video Cloud の値を設定しますbase_url
。これは、北米以外の Brightcove プレーヤーで IP 制限が使用されている場合にのみ変更してください。既存のプレーヤーの場合は、PATCH
HTTP メソッドを使用する次の curl コマンドを使用します (環境変数$EMAIL
、{account_id}
と{player_id}
):
curl
--header "Content-Type: application/json"
--user $EMAIL
--request PATCH
--data '{
"video_cloud": {
"base_url": "https://edge-elb.api.brightcove.com/playback/v1/"
}
}'
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
カールするのが初めての場合は、次の文書が役立ちます。
ブレークポイント
breakpoints
information:
- データタイプ:オブジェクト
- デフォルト:デフォルトのブレークポイントは次のとおりです。
- レスポンシブオプションと一緒に使用すると、プレーヤーのディメンションに基づいて UI を調整するために、プレーヤーでクラス名を切り替える方法を設定するブレークポイントを設定します。
クラス名 幅の範囲 vjs-layout-tiny 0-210 vjs-レイアウト-X-小 211-320 vjs-レイアウト-小 321-425 vjs-レイアウト-媒体 426-768 vjs-レイアウト-大 769-1440 vjs-レイアウト-X-ラージ 1441-2560 vjs-レイアウト-巨大な 2561+
クラス名は変更できませんが、幅の範囲は次のようなオブジェクトを使用して設定できます。
breakpoints: {
tiny: 300,
xsmall: 400,
small: 500,
medium: 600,
large: 700,
xlarge: 800,
huge: 900
}
- ブレークポイントオブジェクトのキーは、関連するクラス名から、
vjs-layout-
プレフィックスと任意-
文字。 - ブレークポイントオブジェクトの値は、範囲の最大幅を定義します。
- すべてのキーを定義する必要はありません。1 つのキー/値のペアでオブジェクトを渡すことで、単一のブレークポイントを簡単に上書きできます。カスタマイズしたブレークポイントは、プレーヤーの作成時にデフォルトのブレークポイントとマージされます。
プレーヤーのサイズが変更されると、一致するブレークポイントが見つかるまで、マージされたブレークポイントはサイズ順に検査されます。そのブレークポイントに関連付けられたクラス名は、クラスとしてプレイヤーに追加されます。以前のブレークポイントのクラスが削除されます。
クロスオリジン
crossorigin
information:
- データ型:ブール値
- デフォルト: false
- true の場合、 < > 基礎となるビデオ要素は crossorigin =「anonymous」になります。つまり、プレーヤーに取り込まれたビデオやテキストトラックには、CORSヘッダーが必要です。
CSS カラーオーバーライド
プレーヤーの色をオーバーライドするために使用できる3つのプロパティがあります。非対応形式:
controlColor
:ボタンとテキストの色(再生ヘッドの位置やビデオ再生時間など)controlBarColor
:コントロールバーと大きな再生ボタンの背景色progressColor
:プログレスバーの色
これらのプロパティには、有効な CSS カラー (16 進色など) が許容される値です。
次に、CSS プロパティの 3 つすべてを緑に設定する curl ステートメントと、結果を表示するスクリーンショットが続きます。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"css": {
"controlColor": "green",
"controlBarColor": "green",
"progressColor": "green"
}
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
デバッガ
デバッガーは、モーダルウィンドウにプレーヤー情報を表示します。詳細については、プレイヤー情報モーダルドキュメントを参照してください。
ドック
dock
information:
- データ型:ブール値
- デフォルト:true
- 明示的であれば
false
、プレーヤーにはビデオタイトルと説明を表示できる、いわゆるドックは含まれません。
embed_id
embed_id
information:
- データ型:文字列
- デフォルト:
undefined
- このプレーヤーに関連付けられた Video Cloud 埋め込み ID。値がの場合、
default
そのプレイヤーは子プレーヤーではないことを意味します。値がでない場合default
、それはプレイヤーの親を表す値です。
エラー
errors
information:
- データタイプ:オブジェクトまたはブール演算
- デフォルト:true
false
明示的に設定すると、プレーヤーはエラーメッセージプラグインである videojs-errors を含めることを防ぎます。この値を false にすると、エラーが発生したときに、プレーヤーは詳細なエラーメッセージを視聴者に表示しません。再生を妨げるエラーは、Web 開発者コンソールに表示されます。
flash
flash
information:
- データタイプ:オブジェクト
- デフォルト:
undefined
- Video.js にカスタム Flash オプションを提供するために使用できます。
fullScreenControl
fullscreenControl
information:
- データ型:ブール値
- デフォルト:true
- フルスクリーンコントロールがコントロールバーに表示されるかどうかを示します
次に、fullscreenControl
値を設定する curl ステートメントを示します。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"autoplay": true,
"fullscreenControl": false
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
次の 2 つのスクリーンショットは、フルスクリーンコントロールの有無にかかわらず、プレーヤーを示しています。
hls
hls
information:
- データタイプ:オブジェクトまたはブール演算
- デフォルト:
{}
- 場合
false
、プレーヤーは videojs-http-streaming を含みません。それ以外の場合は、 videojs-http-ストリーミングのオプションとしてオブジェクトが渡されます。
アクティブでないプレイヤー
プレイヤーを非アクティブにすることは可能です。これは、プレーヤーがコンテンツの提供を停止し、削除されたプレーヤーが閲覧された場合に 404 エラーが表示されないようにしたい場合があります。
プレイヤーを無効にするには、player
inactive
フィールドのプロパティをに設定します。true
とすると、次のようになります。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"player": {
"inactive": true
}
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
もちろん、プレーヤーを有効にしたい場合は、inactive
プロパティをに設定することができますfalse
。
プレーヤーを無効にすると、ユーザーがプレーヤーを参照すると、次のメッセージが表示されます。
言語
language
information:
- データ型:文字列
- デフォルト:
undefined
- を設定するために提供することができます
lang
の属性<html>
素子。
言語
languages
information:
- データタイプ:文字列の配列
- デフォルト:
undefined
- 指定された言語をプレーヤーに含めるための文字列の配列を指定できます。有効な言語は、Video.js に含まれている言語だけです。詳細については、「 Brightcove Player のローカライズ」ドキュメントを参照してください。
ループ
loop
information:
- 動画が終了するとすぐに最初からやり直します。
メディア
ザ・media
次の表に示すように、プロパティには子プロパティがあります。
プロパティ | データ・タイプ | 説明 |
---|---|---|
src | 文字列 |
|
ソース | オブジェクトの配列 |
|
タイトル | 文字列 |
|
ポスター.highres | 文字列 |
|
高さ | 文字列 |
|
幅 | 文字列 |
|
トラック | 配列 |
|
次のJSONでは、media
含むプロパティ:
- A ポスター.highres プロパティ
- A ソース 2つのソースオブジェクトを含むプロパティ。1つはHLSビデオ用、もう1つはMP4ビデオ用です。
"media": {
"poster": {
"highres": "http://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
},
"sources": [{
"type": "application/x-mpegURL",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
}, {
"type": "video/mp4",
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
}]
},
再生用に選択されるソースは、構成したビデオの順序と、プレーヤーがロードされているブラウザーとデバイスの機能によって決まります。デフォルトを変更しておらず、HLSがネイティブでサポートされている場合、プレーヤーは、ソースのいずれかがHLSビデオを指しているかどうかを確認し、最初に見つかったものを選択します。HLSがネイティブでサポートされていない場合、またはHLSビデオソースが指定されていない場合は、次にHTML再生が試行されます。以前と同様に、最初の再生可能なソースが選択されます。ビデオの再生の最初の2回の試行が失敗した場合、Flashフォールバックが試行されます。
要約すると、再生順序は好みの再生メディアを指定し、構成された各オプションは利用可能なすべてのソースを試し、再生方法を知っている最初のソースを使用します。
を使用して、どのソースが再生されているかを確認できます。currentSrc()
関数。次のスクリーンショットは、ブラウザコンソールでの関数の使用を示しています。
ミュートされた
muted
information:
- データ型:ブール値
- デフォルト: false
- プレーヤーのロード時にサウンドをミュートするかどうかを決定します。
picture_in_picture_control
picture_in_picture_control
information:
- データ型:ブール値
- デフォルト:true
- 組み込みのピクチャーインピクチャーコントロールをコントロールバーに表示するかどうかを示します。
playback
playback_rates
information:
- データタイプ:配列
- デフォルト:なし
- 再生レートコントロールに表示する再生レートの配列。
値は読み込まれ、プレイヤーのコントロールバーの再生レートコントロールに表示されます。
Studio または curl を使用して、プロパティの値を変更できます。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"playback_rates": [0.1,1,2.5,6]
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
プレーヤ
player
information:
- データタイプ:オブジェクト
- デフォルト:プレイヤー固有の情報を入力
inactive
やなど、このプレーヤーに関するさまざまなメタデータが含まれていますtemplate.version
。
play_button
play_button
information:
- データタイプ:オブジェクト
- 以下のプロパティは、プレイヤーの設定で変更できます。
プロパティ タイプ 効果 ホバー 文字列 glow
ordarken
; default is pink / progress color形状 文字列 square
orrectangle
; default is a circleポジション 文字列 topLeft
ortopRight
; default is center
player_id
player_id
information:
- データ型:文字列
- プレーヤーに関連付けられた Video Cloud プレーヤー ID
player_name
player_name
information:
- データ型:文字列
- プレイヤーに関連付けられた Video Cloud プレーヤー名-注:
name
プレーヤーに対して入力した名前は、player_name
次の設定を取得したときと同じように返されます。プレイヤープレビュー URLconfig.json
の末尾に置く(プレイヤー管理 APIname
経由で設定を取得したときと同じように返されます)。しかし、name
プレーヤーを作成または更新するときに使用する必要があります。
プレイシンライン
playsinline
information:
- データ型:ブール値
- デフォルト: false
- プレーヤーのインライン再生を有効にします (一部のデバイスでの再生に必要)。
プレイリスト
現在、2 つの異なるプレイリストの実装があります。詳細については、「プレイリストの使用」を参照してください。デフォルトはバージョン 3 です。ここでは、両方のバージョンの設定について詳しく説明します。
どちらの構成でも、次の設定方法を示します。
autoadvance
:再生リストに次のビデオを読み込む前に遅延する整数(秒)。0
assigned の値を指定すると、ビデオ間の待機は発生しません。null
assigned の値は自動進みません。playOnSelect
:true
割り当てられているので、プレイリストメニューから項目をクリックすると、プレーヤー内の前のビデオが一時停止していても、ロード時にビデオが再生されます。
プレイリストバージョン 3 (デフォルト)
バージョン 3 プラグインを使用してプレイリストを設定するには、プラグインレジストリを使用します。プレイリストバージョン 3 プラグインの使用を設定するための curl ステートメントは次のとおりです。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request POST \
--data '{
"name": "Plugin Registry Test Player",
"configuration": {
"video_cloud": {
"video": "4093372393001"
},
"plugins": [
{
"registry_id": "@brightcove/videojs-bc-playlist-ui",
"version": "3.x"
}
]
}
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players
その使用方法と利点については、プラグインレジストリのドキュメントを参照してください。
を設定するにはplayOnSelect
そしてautoadvance
プレーヤーを作成するときのオプションは、以下を使用します。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request POST \
--data '{
"name": "Plugin Registry Test Player",
"configuration": {
"video_cloud": {
"video": "4093372393001"
},
"plugins": [
{
"registry_id": "@brightcove/videojs-bc-playlist-ui",
"version": "3.x",
"options": {
"playOnSelect": true
}
}
],
"autoadvance": 2
}
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players
プレイリストバージョン 1 (レガシー)
autoadvance
とplayOnSelect
2 つのプロパティに加えて、プレイリストバージョン 1 の使用を構成するために使用されます。非対応形式:
playlist
:true
プレイヤーにプレイリストを使用させるように割り当てられます。adjusted
:true
プレイリストのプレーヤーのサイズをプレーヤーに調整するように割り当てられます。
プレイリスト関連のプロパティの3つを設定するcurlステートメントは次のとおりです。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"playlist": true,
"autoadvance": 2,
"studio_configuration": {
"player": {
"adjusted": true,
"height": "",
"width": ""
}
}
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
プレイリストバージョン 1 playOnSelect
に設定するには、次の curl ステートメントを使用します。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
{"playOnSelect": true}
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
プレーヤーにプレイリストが含まれているかどうかをプログラムで判断する
プレーヤーを含むページで JavaScript を使用していて、プレイリストプラグインが使用されているかどうかを確認したい場合は、以下を使用できます。
player.hasPlugin('playlist')
プレイリストプラグインの存在をチェックし、プレーヤーのあるページではなく(例えば、コネクタで使用するプレーヤーのリストをチェックする場合)、もう少し複雑なプロセスを使用する必要があります。プレイヤーの設定を読んで、プレイヤーの JSON のプラグインセクションに「名前」:「bcPlayListui」が含まれているかどうかを確認します。そのタスクの 1 つの解決方法は次のとおりです。
var theJSON = {},
pluginAra = [],
ifFound = [],
theJSONString =
'{"account_id":"1507807800001","autoadvance":0,"autoplay":false,"embed_id":"default","fullscreenControl":true,"id":"r1fbqySRZ","player":{"inactive":false,"template":{"locked":false,"name":"single-video-template","version":"6.8.3","version_alias":null}},"player_id":"r1fbqySRZ","player_name":"playlist v2 junk","playlist":true,"plugins":[{"injected_version":"2.1.2","name":"bcPlaylistUi","options":{"playOnSelect":true},"registry_id":"@brightcove/videojs-bc-playlist-ui","version":"2.x"}],"preload":"metadata","scripts":["//players.brightcove.net/videojs-bc-playlist-ui/2.1.2/videojs-bc-playlist-ui.min.js"],"studio_configuration":{"player":{"adjusted":true,"height":150,"width":300}},"stylesheets":["//players.brightcove.net/videojs-bc-playlist-ui/2.1.2/videojs-bc-playlist-ui.css"],"updated_at":"2017-10-30T18:06:07.800Z","video_cloud":{"policy_key":"BCpkADawqM2_X3Xxh3xln23EqlR3BETHrfycIPT-a7kqhBi6q8g3XOmTr3tEJiFoi_YmI7vfbJzS4mY0Un5RACc3jC8cLVqyvmfWFLI-tG5oJYGXNUrvOwRJYQEt2eVpMZnBd0FH22i7Mtk3","video":null}}';
theJSON = JSON.parse(theJSONString);
pluginAra = theJSON.plugins;
ifFound = pluginAra.filter(function(pluginAra) {
return pluginAra.name === "bcPlaylistUi"
});
if (ifFound.length === 1) {
console.log('Contains playlist plugin');
} else {
console.log('No playlist');
}
プラグイン
plugins
プロパティは、video.js プラグインを初期化する順序と、それらに適用されるカスタマイズされた設定を指定します。プラグインは、scripts
対応するプロパティの URL エントリ、および必要に応じてサポートstylesheets
URL でサポートされる必要があります。plugins
配列の各要素は、name
プロパティを持つオブジェクトであり、options
オプションのプロパティを含めることもできます。
name
:video.js プラグインの名前。サポートする JavaScript コードから取得されます。options
:設定値のオブジェクトハッシュは、初期化時にプラグインに提供するためにオーバーライドされます
オプション子
options
この子プロパティでは、初期化時に使用するデータを渡します。次の JSON は、内の 1 つのオブジェクトを渡しますoptions
。
"plugins": [{
"name": "navigateOnVideoEnd",
"options" : {"redirectURL": "http://docs.brightcove.com"}
}]
これにより、プレーヤーの設定を介してプラグインにデータを渡すことができるようになります。たとえば、redirectURL
上記のオブジェクトを使用するには、プラグイン自体で次のようにします。
videojs.registerPlugin('navigateOnVideoEnd', function (options) {
var myPlayer = this;
myPlayer.on("ended", function () {
window.location.href = options.redirectURL;
});
});
注:標準プラグインの実装を使用しますが、options
無名関数のパラメータとして使用します。その後、options.propertyName
記法を使用して値にアクセスできます。
Brightcoveが提供するプラグインの中には、プラグインレジストリを利用するものもあり、ここで示したものとは設定が異なります。概要を参照してください。詳細については、プラグインレジストリドキュメント。
プリロード
preload
information:
- データ型:文字列
- デフォルト:
none
- preload 属性は、ビデオタグがロードされるとすぐにビデオデータのダウンロードを開始する必要があるかどうかをブラウザに通知します。オプションは [ 自動]、[メタデータ]、[なし] です。
-
自動 :ユーザーが最終的にビデオを見ない場合でも、ビデオファイル全体をダウンロードできることを示します。肯定的な面では、視聴者がビデオを再生すると、すぐに再生を開始できます。負の側では、視聴者がビデオを再生しない場合でも、プリロード/ロードが発生するため、このオプションは帯域幅消費を増加させます。
-
メタデータ (デフォルト):ビデオのメタデータをロードします。これには、ビデオの持続時間やサイズなどの情報が含まれます。この設定では、数秒のビデオデータもロードされます。
-
なし :ビデオデータをプリロードしないでください。これは、ユーザーが [再生] をクリックしてダウンロードを開始するまで待機します。
<video-js preload ...>
or
{ "preload": "auto" }
query_string_to_window
query_string_to_window
information:
-
- 名前:
query_string_to_window.target
- データ型:文字列
-
description: ウィンドウに作成する宛先オブジェクト。パースされたクエリ文字列全体が移入されます。たとえば、
query_string_to_window.target
プレーヤー構成で次のものを使用します。{ "query_string_to_window": {"target": "queryStringParams"} }
?foo=bar&nums=1&nums=2
window.queryStringParams
次のグローバルオブジェクトがプレーヤーとプラグインで利用できるようになります。{ foo: 'bar', nums: ['1', '2'] }
- 名前:
-
- 名前:
query_string_to_window.globals
- データタイプ:配列
-
description: ウィンドウオブジェクトのプロパティ名の配列で、クエリ文字列内の値から移入されます。
window
オブジェクトまたはそのプロトタイプチェーンにすでに存在する一致するプロパティは設定されません。たとえば、query_string_to_window.globals
プレーヤー構成で次のものを使用します。{ "query_string_to_window": { "globals": [ "foo", "nums", "self" ] } }
?foo=bar&nums=1&nums=2&self=not-allowed
window
次のプロパティが追加された次のグローバルオブジェクトが生成されます。window.foo; // 'bar' window.nums; // ['1', '2'] // Because `self` already exists on the `window` object, it will not be set // and a warning will be logged to the browser console. window.self; // window
- 名前:
繰り返す
repeat
information:
- データ型は
boolean
- プレーヤーがプレイリストプレーヤーの場合、プレイリストの再生が繰り返されます。プレイヤー構成の最上位レベルで設定します。
応答します
responsive
information:
- データ型:ブール値
- デフォルト:
true
true
このオプションをに設定すると、プレーヤーは応答性のあるブレークポイントに基づいて自分自身をカスタマイズします (参照: ブレークポイントオプション )。
この機能を有効にする詳細については、 Brightcove Player 6.29.2 のリリースノートを参照してください。
スクリプト
scripts
information:
- データ型は、プレーヤーに含まれている JavaScript ファイルを参照する文字列の配列です
- デフォルト値なし
- プレーヤーのビルド時に、これらのファイルはダウンロードされ、結果の出力にインライン展開されるため、実行時に後でフェッチする必要はありません
- スクリプトは指定された順序でインライン展開されるため、相互に依存するスクリプトを安全に取り入れることができます
スキン
skin
information:
- データ型:ブールまたは文字列
- デフォルト:未定義
- プレーヤーが使用する表示スタイルバリアントを決定します。この値は、
bc.SKIN
ブラウザーのグローバルアクセス可能なプロパティにも反映されます。次の値が認識されます。値 BC.skin 説明 "graphite" "graphite" 旧バージョンの Brightcove Player スタイルといくつかの互換性ハックを使用します。 false "none" すべての Brightcove プレーヤーのスタイリングを無効にします。これは、高度にカスタマイズされた UI をゼロから使用するオプションです。 未定義 "luna" undefined
このままにすると、プレイヤーはデフォルトのスキン (例:k.a.Luna)。
stylesheets
stylesheets
information:
- プレーヤーに含めるべきCSSファイルを参照するURL文字列の配列
- プレーヤーの構築時に、追加のスタイルシートがダウンロードされ、プレーヤーにインライン展開されるため、実行時にフェッチする必要はありません
- スタイルシートは指定した順序に含まれます
techOrder
techOrder
information:
- データタイプ:配列
- デフォルト:['html5'、'フラッシュ']
- デフォルトでは、Brightcove Player は、動画を再生するソースと技術の組み合わせを検索するときに、技術ファースト・オーダーを実行します。つまり、2 つのソースと 2 つの技術がある場合、プレーヤーは次の再生テクノロジを試す前に、
techOrder
オプションプロパティの最初の技術を使用して各ビデオを再生しようとします。ガイドを参照してください。詳細については、再生テクノロジのドキュメントを参照してください。
次の curl ステートメントを使用して、techOrder
をデフォルトからに変更できます。['html5','flash']
['flash','html5']
:
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"techOrder": "['flash','html']"
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
version
プレーヤーモジュールの JSON エディタを使用して、プレーヤーのバージョンを手動で設定できます。
cloud
このプロパティを使用すると、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
リクエストボディオブジェクトでは、name
description
およびはトップレベルのプロパティであり、その他はすべて次のプロパティです。configuration
オブジェクト。のいずれか構成プロパティに含めることができますconfiguration
プレーヤーを作成するとき。
volume_オリエンテーション
volume_orientation
information:
- データ型:文字列
- デフォルト:水平
volume_orientation
プロパティは、ボリュームレベルスライダーが水平方向または垂直のどちらに向いているかを決定します。
Studio または curl を使用して、プロパティの値を変更できます。
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request PATCH \
--data '{
"volume_orientation": "vertical"
}' \
https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
vttjs
vttjs
information:
- データ型:文字列
- デフォルト:vjs.zencdn.net CDN
- vtt.js をロードする URL を設定します。これは、標準の Video.js オプションと同じです
vtt.js
。Brightcove Playervttjs
は代わりにを使用します。点線のプロパティ名は Player 管理 API では使用できず、他の場所で問題となる可能性があります。このオプションは、data-vttjs
属性、vttjs
iframe クエリパラメータ、vttjs
セットアップオプション、vttjs
またはプレーヤーで設定できます構成。
wait_for_ad_block_detect
wait_for_ad_block_detect
information:
- データ型:ブール値
- デフォルト:未定義
- に設定すると
true
、広告ブロック検出が決定するまで、プレーヤーは自動初期化プロセスを遅らせます。これにより、プレイヤーの初期化が最大100ミリ秒程度遅れる可能性があります。これをに設定する必要はありませんtrue
使用する場合ad_failover
どちらの場合も遅延動作が発生するためです。