Brightcove Player 用 Chromecast プラグイン

はじめに

Google Chromecast は、テレビの HDMI ポートに差し込んで使用するデバイスです。スマートフォンやコンピューターをリモコンとして使用することで、Chromecast を介して動画コンテンツにアクセスできます。Chromecast プラグインを使用すると、Brightcove Player を使ってデスクトップや Android Chrome ブラウザーから Chromecast デバイスへ動画をキャストできるようになります。

このプラグインは、Widevine を使用した DRM 暗号化ストリームを含む、すべての Video Cloud 動画と HLS または DASH を使用した外部ストリームをサポートします。広告は、Video Cloud のサーバーサイド広告挿入 (SSAI) を通じてサポートされます。プレイリストは、Web プレーヤーで Chromecast 上の Brightcove レシーバーを使用する場合にサポートされます。クライアントサイドの広告はサポートされていません。

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

Brightcove Player 用 Chromecast プラグインを読み込みます (下記の実装セクションを参照)。
Chromecast デバイスが、動画を再生するデバイスと同じネットワークに接続されていることを確認します。
動画の再生を開始します。
キャストボタンをクリックし、Chromecast デバイスを選択します。

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

Chromecast を支えるソフトウェアは、次のコンポーネントで構成されています。

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

Brightcove Player 用 Chromecast プラグインは、Brightcove Player のセンダーアプリを有効化します。本トピックでは、このプラグインについて学習します。
レシーバーアプリ: パブリックインターネット上にホストされ、Chromecast デバイス上で動作するカスタム Web アプリケーションです。センダーアプリとレシーバーデバイス間の通信を処理します。CSS と JavaScript アセットを持つシングルページ HTML アプリと考えることができます。

デフォルトでは、Chromecast プラグインは Brightcove のキャストレシーバーアプリを使用します。これは Brightcove の CDN にホストされた Web アプリケーションで、キャストセッション中に Chromecast に読み込まれます。
注意:
- Brightcove のキャストレシーバーアプリは Chromecast キューイングをサポートしていません。
- ドメイン制限のあるプレーヤーで Chromecast を機能させるには、Chromecast レシーバーのドメイン (players.brightcove.net) をホワイトリストに登録する必要があります。
- 独自のカスタムレシーバーアプリの使用は、SDK と Brightcove Player の両方でオプションを通じてサポートされています。
- Windows 10 マシンからキャストする場合、テレビ上でキャストの動画プレーヤーが拡大表示 (オーバースキャン) されることがあります。これは Windows 10 とテレビの間の挙動であり、Brightcove Player では修正できません。

サポートされる Chromecast デバイス

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

Chromecast (第 3 世代)
Chromecast Ultra
Chromecast with Google TV

動作の仕組み

現在の実装 (プラグイン / レシーバーバージョン 2.x) は CAF (Cast Application Framework) API を使用しています。

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

このボタンをクリックまたはタップすると、プレーヤーに現在読み込まれている動画でキャストセッションが開始されます。動作の流れは次のとおりです。

プラグインがレシーバーに一連のパラメーターを送信します。
レシーバーは、Brightcove の CDN から読み込むことで送信側プレーヤーをミラーリングします。
読み込みが完了すると、レシーバー側のプレーヤーは、キャストセッション開始時に送信された Playback API の動画 ID を読み込みます。
その後、レシーバー側のプレーヤーは送信側プレーヤーの再生位置から再生を開始します。

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

アナリティクス

現在のところ、アナリティクスの観点では、キャストセッションは完全に新しい再生セッションとして扱われます。

UX の観点では、視聴者は送信デバイスでストリームが一時停止し、レシーバーで再開されるのを目にします。

データの観点では、メトリクスはデフォルトで匿名化されているため、別のデバイスで新しい視聴者が新しいストリームを開始したものとして記録されます。これは実際に発生していることそのものです。

また、Chromecast は、ユーザーエージェントと Chromecast のバージョンに応じて、Analytics モジュールでは android または linux のいずれかに分類されることに注意してください。

要件

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

Brightcove Player v6.45.0 以降
Brightcove Chromecast プラグイン v2.0.0 以降

実装

{% include packaged-disclaimer.html %}

Brightcove Player 用 Chromecast プラグインは、他の Brightcove Player プラグインと同じように使用します。つまり、プレーヤーにプラグインを読み込む必要があります。

Studio を使用する場合

次の手順では、Studio を使用してプラグインを読み込む方法について説明します。

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを選択します。
プレーヤーのリンクを選択して、プレーヤーのプロパティを開きます。
Overview タブで Plugins セクションを展開します。
次に、Add Plugin ボタンを選択し、Brightcove Plugin を選択します。

Add Plugin ボタン
Brightcove Plugin ドロップダウンを展開し、Chromecast Sender を選択します。

Chromecast Sender
Add ボタンを選択します。プレーヤーのプラグイン一覧に Chromecast Sender プラグインが追加されたことを確認できます。

追加されたプラグイン
プレーヤーを公開するには、Publish Changes をクリックします。
開いているダイアログを閉じるには、Close を選択します。
MEDIA モジュールに戻り、Chromecast 用に更新したばかりのプレーヤーを使って動画またはプレイリストを公開します。

プラグインが読み込まれ、動画の再生が始まり、利用可能な Chromecast デバイスが範囲内にある場合、次のスクリーンショットのようにプレーヤーにキャストボタンが表示されます。

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

{% include plugin-json.html %}

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

構成オプション

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);
 });

アドバイス

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

Web プレーヤーとその再生エンジンはある程度リソースを多く消費するため、Chromecast のようなリソース制約のある環境で重い追加スクリプトを実行すると、ユーザーエクスペリエンスに悪影響を及ぼす可能性があります。

オプション

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

options.appName
型: string
デフォルト: 'Brightcove Chromecast CAF v2.0'
デフォルトのアプリケーション名を、独自のカスタム名で上書きします。

このオプションは Chromecast Receiver プラグインバージョン 2.2.0 以降で利用できます。
options.playerUrl
型: string
デフォルト: ''
デフォルトでは、送信側プレーヤーがレシーバー側でミラーリングされます。このオプションを使用すると、レシーバー側のカスタム Brightcove Player URL を指定できます。

これはレシーバー上で読み込まれる Brightcove プレーヤーであるため、Chromecast の外でもプレーヤーをカスタマイズ、スタイリング、デバッグすることができます。

playerUrl オプションを使用する場合、送信側として使用されるプレーヤーとレシーバーとして使用されるプレーヤーが異なる点に注意してください。ドメイン制限のあるプレーヤーを使用している場合、ホワイトリストの設定が必要です。ホワイトリスト設定は 送信側 プレーヤーに対して行う必要があり、レシーバー として使用されるプレーヤー (このオプションで指定されたプレーヤー) に対しては行いません。

これは Brightcove CDN 上の index.min.js ファイルへの URL である必要があります。
options.splashScreen
型: string
デフォルト: ''
動画の前および動画の切り替え時に表示されるスプラッシュスクリーン。
options.ssaiDynamicMacros
型: Array
デフォルト: undefined
このオプションを使用すると、Web プレーヤーから Chromecast レシーバーへ動的広告マクロのセットを渡すことができます。

この配列の各要素は、グローバル変数 (window のプロパティ) の名前と一致する文字列である必要があります。この値は Chromecast 上のプレーヤーに渡され、VOD SSAI URL の広告マクロを解決する際に使用されます。

たとえば、SSAI 実装が exampleMacro がグローバルに利用可能であることに依存している場合、Chromecast プラグインのオプションに次のように追加します。
```
"ssaiDynamicMacros": ["exampleMacro"]
```
送信側プレーヤーがキャストすると、window.exampleMacro の値がレシーバーに渡され、組み込みの SSAI 広告マクロ解決処理によって自動的に取得されます。
options.liveUpdateThrottle
型:: number デフォルト: 500
影響を受けるバージョン:
- v4.1.0 以降 (プレーヤーバージョンは TBC)
- v3.4.0 以降
レシーバーが、ライブ再生データを更新するメッセージを送信側に送る際に待機する最小時間 (ミリ秒) を表します。

DVR ウィンドウを伴うライブストリームのキャスト中、レシーバーは送信側のプログレスバーを最新に保つために更新メッセージを送信側に送信します。これらの更新は、送信側とレシーバー間で同期ずれが知覚されないよう頻繁に行われる必要がありますが、頻度が高すぎるとパフォーマンスの問題を引き起こす可能性があります。デフォルトの 500ms はそのバランスを取った値ですが、お客様はターゲットデバイスでテストを行ったうえで、独自の値を指定したい場合があるかもしれません。

あまり使用されないオプション

次のオプションは一般的には使用されません。

`options.authRequest`

型: string または object または function
デフォルト: {}

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

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

文字列としての使用

authRequest が文字列の場合、その URL に対して空の GET リクエストが送信されます。

オブジェクトとしての使用

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

プロパティ	型	必須	デフォルト	説明
`url`	`string`	はい	`''`	リクエスト先の URL
`method`	`string`	いいえ	`GET`	使用する HTTP メソッド
`body`	`string`	いいえ	`''`	リクエストボディ
`headers`	`object`	いいえ	`{}`	HTTP ヘッダーを表すオブジェクト。キーがヘッダー名、値がヘッダー値となります。
`withCredentials`	`boolean`	いいえ	`false`	HTTP ヘッダーを表すオブジェクト。キーがヘッダー名、値がヘッダー値となります。
`timeout`	`number`	いいえ	`15000`	認証リクエストを諦めるまでの待機時間 (ミリ秒)

関数としての使用

authRequest が関数の場合、上記のいずれかの使用方法に従って文字列またはオブジェクトを返す必要があります。

options.appId
型: string
デフォルト: 'C179578D'
これは、デフォルトの内部 Chromecast レシーバーアプリ ID を上書きするために使用できます。これは Brightcove の Chromecast レシーバーアプリの使用をやめ、独自のレシーバーアプリを使用するという選択です。Brightcove はサードパーティレシーバーのサポートはできません。

制限事項と既知の問題

DVR ウィンドウ内からキャストする場合、レシーバーが送信側に再生位置を一致させるまでに、ライブエッジのコンテンツが一瞬表示されることがあります。
HEVC/4K コンテンツは、Chromecast Ultra デバイスおよび新しい Chromecast with Google TV デバイスでのみサポートされます。
クライアントサイドの広告は現在サポートされていませんが、SSAI はサポートされています。
このプラグインでは、再生レートの調整は現在サポートされていません。
キャプショントラックを選択し、レシーバーで表示された後に、送信側でシークを行う際に問題が発生することが確認されています。
Chromecast with Google TV デバイスでは、キャプション使用時に UI および再生に関する問題が確認されています。
Google は Chromecast でセキュアでないオリジン (HTTP) のサポートを終了しているため、このプラグインはセキュアでないコンテキストでは動作しません。その場合、プレーヤーの Chromecast ボタンは表示されません。
Chromecast プラグインはブラウザーのキャストサポートに依存しているため、サポートされる OS / ブラウザーの組み合わせは次のとおりです。
- デスクトップ / Chrome
- Android / Chrome
Chromecast プラグインは、デスクトップ / iOS の Safari や iOS の Chrome ではサポートされていません。これらの場合、Chromecast アイコンは表示されません。
Google は単一ページ上での Chromecast センダーボタンの複数インスタンスをサポートしていません。回避策としては、Iframe プレーヤー実装を使って Brightcove Player を埋め込むか、必要に応じてプレーヤーを動的に生成・破棄する方法があります。後者については、Brightcove Player サンプル: プレーヤーを動的に読み込むドキュメントを参照してください。
このプラグインは Google Nest Hub にはキャストしません。プラグインは実際の Chromecast デバイス (Chromecast および Chromecast Ultra) のみをサポートします。
Android WebView は Chromecast でのキャストをサポートしていません。詳細は Android の Issue Tracker を参照してください。

v1.x から v3.x への変更点

v2 Chromecast API ではなく CAF API を使用するなどの内部的な変更に加え、次のインターフェースが変更されています。

options.css および options.js はサポートされなくなりました。
customData.analyticsParams が追加されました。
customData.catalogData は、他の使用方法との一貫性向上のため customData.catalogParams に名称変更されました。
customData.policyKey は customData.catalogParams.policyKey に置き換えられました。
customData.keySystems が追加されました。

変更履歴

v{{ page.lastPluginVersion }} までの過去のリリースノートおよび変更履歴については、Chromecast Receiver プラグインのリリースを参照してください。

v{{ page.lastPluginVersion }} 以降の主な変更については、Brightcove Player リリースノートに含められます。

制限事項

現在、Chromecast プラグインはリモートコントロールをサポートしていません。

Brightcove Player 用 Chromecast プラグイン

はじめに

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

サポートされる Chromecast デバイス

動作の仕組み

アナリティクス

要件

実装

Studio を使用する場合

構成オプション

アドバイス

オプション

`options.appName`

`options.playerUrl`

`options.splashScreen`

`options.ssaiDynamicMacros`

`options.liveUpdateThrottle`

あまり使用されないオプション

`options.authRequest`

文字列としての使用

オブジェクトとしての使用

関数としての使用

`options.appId`

制限事項と既知の問題

v1.x から v3.x への変更点

v3.x から v4.x への変更点

パッケージプラグイン

変更履歴

制限事項

Brightcove Player 用 Chromecast プラグイン

はじめに

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

サポートされる Chromecast デバイス

動作の仕組み

アナリティクス

要件

実装

Studio を使用する場合

構成オプション

アドバイス

オプション

options.appName

options.playerUrl

options.splashScreen

options.ssaiDynamicMacros

options.liveUpdateThrottle

あまり使用されないオプション

options.authRequest

文字列としての使用

オブジェクトとしての使用

関数としての使用

options.appId

制限事項と既知の問題

v1.x から v3.x への変更点

v3.x から v4.x への変更点

パッケージ プラグイン

変更履歴

制限事項

`options.appName`

`options.playerUrl`

`options.splashScreen`

`options.ssaiDynamicMacros`

`options.liveUpdateThrottle`

`options.authRequest`

`options.appId`

パッケージプラグイン