Brightcoveプレーヤー用のChromecastプラグイン

概要

Google Chromecast は、テレビの HDMI ポートに接続するデバイスです。スマートフォンまたはパソコンをリモコンとして使用すると、Chromecast を使用してビデオコンテンツにアクセスできます。Brightcove Player用 Chromecast プラグインを使用すると、プレーヤーはデスクトップまたは Android Chrome ブラウザから Chromecast デバイスに動画をキャストできます。

このプラグインは、Widevine を使用する DRM 暗号化ストリームを含め、すべての VideCloud ビデオまたは HLS または DASH を使用する外部ストリームをサポートします。広告は、Video Cloud のサーバー側広告挿入（SSAI）を通じてサポートされています。クライアント側の広告とプレイリストはサポートされていません。

プラグインを使用するには、次の手順に従います。

Brightcove Player用 Chromecast プラグインをロードします (詳細は後述)。
Chromecast デバイスが、動画を再生するデバイスと同じネットワーク上にあることを確認してください。
ビデオの再生を開始します。
キャストボタンをクリックし、Chromecast デバイスを選択します。

Chromecast アプリのコンポーネント

Chromecast の背後にあるソフトウェアは、次のコンポーネントで構成されています。

送信者アプリケーション :これは、キャストセッションを開始して受信機と通信できる任意のアプリケーションです。送信側アプリケーションは、Chromecast エコシステムの「クライアント側」の部分と考えることができます。

Brightcove Player用 Chromecast プラグインを使用すると、Brightcove Player で送信者アプリが有効になります。このトピックでは、それについて学びます。
受信機アプリケーション :これは、パブリックインターネット上でホストされ、Chromecast デバイス上で実行されるカスタム Web アプリケーションです。送信側アプリと受信機デバイス間の通信を処理します。これは、CSSとJavaScriptアセットを持つ単一ページの HTML アプリと考えることができます。

For Chromecast to work with domain restricted players, you should whitelist the Chromecast receiver's domain, which is players.brightcove.net.

要件

Chromecast プラグインには、次の要件が必要です。

ブライトコーブプレイヤー v6.45.0 以降
ブライトコーブ Chromecast プラグイン v2.0.0 以降

デバイス

次のデバイスがサポートされています。

Chromecast (第3世代)
Chromecast Ultra
Google TVを搭載したChromecast（予備サポート）

使い方

現在の実装 (プラグイン/レシーバのバージョン 2.x) では、CAF (キャストアプリケーションフレームワーク) API を使用します。

Chromecast レシーバープラグインを追加すると、ローカルネットワーク上で利用可能な Chromecast がある場合、プレーヤーの UI にキャストボタンが表示されます。

このボタンをクリックまたはタップすると、Brightcove Player にロードされている現在の動画でキャストセッションが開始されます。それがどのように機能するかは次のとおりです。

プラグインは、受信機にパラメータのセットを送信します。
受信機は、ブライトコーブの CDN から読み込んで、送信側プレーヤーをミラーリングします。
読み込まれた受信側プレーヤーは、キャストセッションの開始時に送信された再生 API からビデオ ID をロードします。
次に、受信側プレーヤーは、送信側プレーヤーの再生ヘッド位置で再生を開始します。

このプロセスは、Playback API リクエストがないことを除いて、Video Cloud 以外のソースでも同じです。

分析

現在、分析の観点からは、キャストセッションはまったく新しい再生セッションとして扱われます。

UXの観点からは、視聴者は送信側デバイスでストリーム一時停止を確認し、受信機上で再開します。

データの観点からは、メトリックスはデフォルトで匿名化されているため、別のデバイスで新しいストリームを開始する新しいビューアとして記録されます。これが実際に起こることです。

また、Chromecastはアナリティクスモジュールで次のように分類されていることにも注意してくださいアンドロイドまたLinux、ユーザーエージェントとChromecastのバージョンによって異なります。

プラグインの使用

Brightcove Player 用 Chromecast プラグインは、他のすべての Brightcove Player プラグインと同じように使用されます。つまり、プラグインをプレーヤーにロードする必要があります。

スタジオを使用する

以下の手順では、Studioを使用してプラグインをロードする方法について詳しく説明します。

を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
左側のナビゲーションメニューで、[ プラグイン] を選択します。
次に、[ プラグインを追加]ボタンを選択し、[ ブライトコーブプラグイン] を選択します。

[プラグインを追加] ボタン
を展開しますBrightcoveプラグインドロップダウンして選択しますChromecastレシーバー。

Chromecast レシーバー
オプション :[ オプション (JSON)] テキストボックスに構成オプションを入力します。1752604059001アカウントのデフォルトプレーヤーの例を示します。もちろん、あなたのプレーヤーの情報を入力する必要があります。
```
{
"playerUrl" : "https://players.brightcove.net/1507807800001/default_default/index.min.js"
}
```
オプションの詳細については、以下を参照してください。
[ 保存] ボタンを選択します。これで、 Chromecastレシーバープレーヤーのプラグインのリストにプラグインが追加されました。

プラグインが追加されました
プレーヤーを公開するには、[ 公開と埋め込み] > [変更を公開] を選択します。
開いているダイアログを閉じるには、[ 閉じる] を選択します。
メディアに戻り、Chromecast で更新したプレーヤーを使用してビデオまたはプレイリストを公開します。

プラグインがロードされ、ビデオの再生が開始され、利用可能な Chromecast デバイスが範囲内にあると、プレーヤーのこのスクリーンショットに示すように、キャストボタンがプレーヤーに表示されます。

利用可能なChromecastデバイスが範囲内にある場合、Chromecastプラグインのキャストボタンがプレーヤーのコントロールバーに表示されます。

手動で構成する

JSON エディタを使用してプラグインを追加するには、次の手順に従います。

を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
左側のナビゲーションメニューで、[ JSON エディタ] を選択します。

JSONエディター

plugins配列にオブジェクトを追加する

コードは次のようになります。

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "your policy key"
  },
  "player": {
    "template": {
      "name": "single-video-template",
      "version": "6.45.4"
    }
  },
  "studio_configuration": {
    "player": {
      "responsive": true,
      "height": 540,
      "width": 960,
      "units": "px"
    }
  },
  "plugins": [
    {
      "name": "chromecastReceiver",
      "options": {},
      "stylesheets": ["https://players.brightcove.net/videojs-chromecast-receiver/2/videojs-chromecast-receiver.css"],
      "scripts": ["https://players.brightcove.net/videojs-chromecast-receiver/2/videojs-chromecast-receiver.js"]
    }
  ]
}

オプションの詳細については、以下を参照してください。

構成オプション

Brightcove Player の Chromecast プラグインの設定方法に関係なく、プラグインの動作を変更するオプションを渡すことができます。これらのオプションを設定する必要はありませんが、上級ユーザーは追加のカスタマイズが可能です。

コードでオプションを渡すには、次のようなものを使用します。

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  options = {};
  options.playerUrl = '//players.brightcove.net/1752604059001/default_default/index.min.js';
  myPlayer.chromecastReceiver(options);
});

アドバイス

ウェブプレーヤーに多数のプラグインやカスタムスクリプトが含まれている場合は、Chromecast 再生専用の軽量プレーヤーを作成することを検討してください。

ウェブプレーヤーとそのプレイバックエンジンはややリソースを消費するため、追加の重いスクリプトを使用してリソースに制約された環境（Chromecastなど）で実行すると、ユーザーエクスペリエンスに悪影響を与える可能性があります。

オプション

Chromecastプラグインは、次のオプションをサポートしています。

options.appName
タイプ : string
デフォルト：「BrightcoveChromecastCAFv2.0」
デフォルトのアプリケーション名を独自のカスタム名で上書きします。

このオプションは、 Chromecastレシーバープラグインバージョン2.2.0および新しい。
options.playerUrl
タイプ：string
ディフォルト： ''
デフォルトでは、送信側のプレーヤーは受信側にミラーリングされます。このオプションを使用して、カスタムの受信側の Brightcove Player URL を指定できます。

これは受信機に読み込まれる Brightcove プレーヤーなので、Chromecast 以外でプレーヤーをカスタマイズ、スタイル、デバッグすることができます。

これはへのURLである必要がありますindex.min.js BrightcoveCDNのファイル
options.splashScreen
タイプ：string
ディフォルト： ''
NS スプラッシュ画面これは、ビデオの前とビデオの切り替え時に表示する必要があります。

options.authRequest
タイプ：stringまたobjectまたfunction
ディフォルト：{}

動画がリクエストされる前にコンテンツを再生するための認証を取得するリクエストをChromecastで実行する必要がある場合は、このオプションを使用できます。

これを使用して Cookie を取得することもできますが、独自のコンテンツをホストしている場合は、クロスドメイン Cookie players.brightcove.netを設定できるようにサーバーを設定する必要があります。

文字列の使用法

authRequestが文字列の場合、空の GET リクエストは URL に対して行われます。

オブジェクトの使用法

authRequestオブジェクトがいつになるかは、特定のリクエストペイロードプロパティを指定するために使用できます。

プロパティ	タイプ	必須	デフォルト	説明
`url`	`string`	はい	`''`	リクエストするURL
`method`	`string`	いいえ	`GET`	使用する HTTP メソッド
`body`	`string`	いいえ	`''`	リクエスト本文
`headers`	`object`	いいえ	`{}`	HTTPヘッダーを記述するオブジェクト。キーはヘッダー名であり、プロパティはヘッダー値です
`withCredentials`	`boolean`	いいえ	`false`	HTTPヘッダーを記述するオブジェクト。キーはヘッダー名であり、プロパティはヘッダー値です
`timeout`	`number`	いいえ	`15000`	認証要求を放棄する前に待機するミリ秒は何ミリ秒ですか

関数の使用法

authRequestが関数であるときは、その用途ごとに文字列またはオブジェクトのいずれかを返す必要があります。

制限事項と既知の問題

HEVC/4K コンテンツは、Chromecast Ultra デバイスと Google TV デバイスを搭載した新しい Chromecast でのみサポートされます。
クライアント側の広告は現在サポートされていませんが、SSAI はサポートされています！
キャプショントラックが選択され、受信機に表示された後、送信者にシークする際に問題が発生しました。
Google TV デバイス搭載の Chromecast では、キャプションの使用時に UI の問題と再生の問題が発生しました。
Google は Chromecast でセキュアでないオリジン (HTTP) のサポートを停止したため、プラグインは非セキュアなコンテキストでは動作しません。この場合、プレーヤーの Chromecast ボタンは表示されません。
Chromecast プラグインはキャストのブラウザーのサポートに依存しているため、以下の OS とブラウザーの組み合わせでのみサポートされます。
- デスクトップ/クロム
- アンドロイド/クロム
Google では、1 つのページで Chromecast の送信者ボタンの複数のインスタンスをサポートしていません。回避策としては、標準（iframe）プレーヤーの実装を使用して Brightcove Player を埋め込むか、必要に応じてプレーヤーを動的にインスタンス化して破棄する方法があります。ドキュメントの「Brightcove Playerのサンプル:後者の可能性については、プレーヤーを動的にロードします。
このプラグインは Google ネストハブにはキャストされません。プラグインは、実際の Chromecast デバイス (つまり Chromecast と Chromecast Ultra) のみをサポートしています。

v1.xからv2.xへの変更

v2 Chromecast API の代わりに CAF API を使用するなどの内部的な変更に加え、次のインターフェイスが変更されました。

options.cssoptions.jsとサポートされなくなりました。
customData.analyticsParams追加されました
customData.catalogDatacustomData.catalogParams他の用途との整合性を改善するために名前が変更されました
customData.policyKeyに置き換えられましたcustomData.catalogParams.policyKey
customData.keySystems追加されました

更新履歴

を参照してくださいChromecastレシーバーとプラグインのリリース。

過去のリリースノートについては、ここの changelog を参照してください。