Brightcove Player 用 Chromecast プラグイン

このトピックでは、Brightcove Player 用 Chromecast プラグイン（3.x）を使用して、動画を Chromecast 接続テレビにキャストする方法を学びます。

イントロダクション

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

このプラグインは、Video Cloud 動画や HLS／DASH を使用した外部ストリームをサポートしており、Widevine を使用した DRM 保護ストリームにも対応しています。広告は Video Cloud サーバーサイド広告挿入（SSAI）を通じてサポートされます。Brightcove Receiver を利用した Chromecast でのプレーヤー再生では、プレイリストもサポートされています。クライアントサイド広告には対応していません。

プラグインを使用するには、以下の手順に従ってください：

  1. Brightcove Player 用 Chromecast プラグインを読み込みます（下記 実装 セクション参照）。
  2. Chromecast デバイスが動画を再生するデバイスと同じネットワーク上にあることを確認します。
  3. 動画の再生を開始します。
  4. キャストボタンをクリックし、Chromecast デバイスを選択します。

Chromecast アプリの構成要素

Chromecast のソフトウェアは以下のコンポーネントで構成されています：

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

    Brightcove Player 用 Chromecast プラグインは Brightcove Player 内で Sender アプリ機能を有効にします。このトピックでその詳細を学びます。

  • Receiver アプリ：Chromecast デバイス上で動作するカスタム Web アプリケーションで、パブリック インターネット上にホストされます。Sender アプリと受信デバイス間の通信を処理します。HTML/CSS/JavaScript を用いたシングル ページ アプリとして考えることができます。

    デフォルトでは、Chromecast プラグインは Brightcove Cast Receiver アプリを使用します。このアプリは Brightcove の CDN にホストされており、キャストセッション中に Chromecast に読み込まれます。

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

以下のデバイスがサポートされています：

  • Chromecast（第3世代）
  • Chromecast Ultra
  • Chromecast with Google TV

動作の仕組み

現在の実装（プラグイン／Receiver バージョン 2.x）は CAF（Cast Application Framework）API を使用しています。

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

キャストボタンをクリックまたはタップすると、プレーヤーに読み込まれている動画でキャストセッションが開始されます。以下が処理の流れです：

  1. プラグインが一連のパラメータを Receiver に送信します。
  2. Receiver は送信側プレーヤーを Brightcove の CDN から読み込み、ミラーリングします。
  3. 読み込み後、Receiver 側プレーヤーはキャスト開始時に送信された Playback API の動画 ID をロードします。
  4. その後、Receiver 側プレーヤーは送信側プレーヤーの再生位置から再生を開始します。

Video Cloud 以外のソースについては、この処理は同様ですが Playback API 呼び出しは行われません。

アナリティクス

アナリティクス上、キャストセッションは完全に新しい再生セッションとして扱われます。

UX 上は、視聴者は送信側デバイスでストリームが一時停止し、受信側デバイスで再開することを確認できます。

データ上は、メトリクスがデフォルトで匿名化されているため、新しいデバイスで新しい視聴者が再生を開始したものとして記録されます。これは実際の挙動と一致します。

要件

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

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

実装

Brightcove Player 用 Chromecast プラグインは、他の Brightcove Player プラグインと同様に、プレーヤーへ読み込むことで使用します。

Studio を使用する方法

以下の手順では、Studio を使ってプラグインを読み込む方法を説明します。

  1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを探します。
  2. プレーヤーのリンクを選択して、プレーヤーのプロパティを開きます。
  3. 左側のナビゲーションメニューで プラグイン を選択します。

  4. 次に プラグインの追加 ボタンを選択し、Brightcove プラグイン を選択します。

    Add a Plugin button
    Add a Plugin ボタン

  5. Brightcove プラグイン ドロップダウンを展開し、Chromecast Receiver を選択します。

    chromcast-receiver
    Chromecast Receiver

  6. 保存 ボタンを選択します。これで、プレーヤーのプラグイン一覧に Chromecast Receiver プラグインが追加されます。

    Plugin added
    追加されたプラグイン
  7. プレーヤーを公開するには、 公開と埋め込み > 変更の公開 を選択します。
  8. 開いているダイアログを閉じるには、閉じる を選択します。

  9. MEDIA モジュールに戻り、Chromecast 用に更新したプレーヤーを使用して動画またはプレイリストを公開します。

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

    Cast button

手動で設定する方法

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

  1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを探します。
  2. プレーヤーのリンクを選択して、プレーヤーのプロパティを開きます。

  3. 左側のナビゲーションメニューで JSON エディタ を選択します。

    Add a Plugin button
    JSON Editor

  4. 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/3/videojs-chromecast-receiver.css"
              ],
              "scripts": [
                "https://players.brightcove.net/videojs-chromecast-receiver/3/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);
          });

推奨事項

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

Web プレーヤーおよびその再生エンジンはある程度リソース負荷が高いため、Chromecast のようなリソース制約のある環境で、さらに重いスクリプトを併用するとユーザー体験が損なわれる可能性があります。

オプション

Chromecast プラグインは以下のオプションをサポートします：

  • options.appName

    Type: string
    Default: 'Brightcove Chromecast CAF v2.0'

    デフォルトのアプリケーション名を任意のカスタム名に上書きします。

  • options.playerUrl

    Type: string
    Default: ''

    デフォルトでは、送信側プレーヤーが Receiver 上でミラーリングされます。このオプションを使用すると、Receiver 側で使用するカスタム Brightcove Player の URL を指定できます。

    Receiver 上に読み込まれるのは Brightcove プレーヤーなので、Chromecast の外でプレーヤーのカスタマイズ、スタイル設定、デバッグを行うことができます。

    なお、playerUrl オプションを使用する場合、送信側プレーヤーと受信側プレーヤーは別のプレーヤーになります。ドメイン制限付きプレーヤーを使用している場合は、ホワイトリスト設定が必要です。このホワイトリスト設定は Receiver 側ではなく、送信側 プレーヤーに対して行う必要があります（このオプションで指定したプレーヤーが Receiver 側プレーヤーです）。

  • options.splashScreen

    Type: string
    Default: ''

    動画の再生前および動画が切り替わる際に表示されるスプラッシュ スクリーンを指定します。

  • options.ssaiDynamicMacros

    Type: Array
    Default: undefined

    このオプションを使用すると、Web プレーヤーから Chromecast Receiver に対して、動的広告マクロのセットを渡すことができます。

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

    たとえば、SSAI 実装でグローバルに exampleMacro が利用可能であることに依存している場合、Chromecast プラグインのオプションに次のように追加します：

    "ssaiDynamicMacros": ["exampleMacro"]

    送信側プレーヤーがキャストを行うと、window.exampleMacro の値が Receiver 側に渡され、組み込みの SSAI 広告マクロ解決処理によって自動的に使用されます。

  • options.liveUpdateThrottle

    Type: number
    Default: 500

    適用バージョン：

    • v4.1.0 以降（プレーヤーバージョンは TBC）
    • v3.4.0 以降

    Receiver がライブ再生データの更新メッセージを送信側に送る際に、連続するメッセージ送信の間で待機する最小時間（ミリ秒）を表します。

    DVR ウィンドウ付きライブストリームをキャストしている間、Receiver は送信側のプログレスバーを最新の状態に保つため、送信側へ更新メッセージを送信し続けます。これらの更新は、送信側と受信側の同期ずれを感じさせないために十分な頻度で行う必要がありますが、頻度が高すぎるとパフォーマンス問題を引き起こす可能性があります。デフォルトの 500ms はそのバランスを取った値ですが、ターゲット デバイスでのテスト結果に基づき、独自の値を指定することもできます。

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

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

  • options.authRequest

    Type: string または object または function
    Default: {}

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

    また、Cookie を取得する用途にも使用できますが、自前でコンテンツをホストしている場合は、サーバー側で players.brightcove.net からのクロスドメイン Cookie 設定を許可する必要があります。

    文字列として使用する場合

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

    オブジェクトとして使用する場合

    authRequest がオブジェクトの場合、以下のようなリクエスト ペイロードのプロパティを指定できます：

    Property Type Required Default Description
    url string Yes '' リクエスト先の URL
    method string No GET 使用する HTTP メソッド
    body string No '' リクエスト ボディ
    headers object No {} HTTP ヘッダーを表すオブジェクト。キーがヘッダー名、値がヘッダー値となります。
    withCredentials boolean No false 認証情報付きでリクエストを送信するかどうかを指定します。
    timeout number No 15000 認証リクエストをタイムアウトとみなすまで待機する時間（ミリ秒）

    関数として使用する場合

    authRequest が関数の場合、その戻り値として、上記いずれかのケースに対応する文字列またはオブジェクトを返す必要があります。

  • options.appId

    Type: string
    Default: 'C179578D'

    デフォルトの内部 Chromecast Receiver アプリ ID を上書きするために使用します。これは Brightcove の Chromecast Receiver アプリの利用をやめ、自前の Receiver アプリを使用することを意味します。Brightcove はサードパーティ Receiver に対するサポートは提供しません。

制限事項と既知の問題

  • DVR ウィンドウ内からキャストする場合、Receiver が送信側と同じ再生位置に追従する前に、ライブエッジのコンテンツが一瞬表示されることがあります。
  • HEVC/4K コンテンツは Chromecast Ultra および Chromecast with Google TV の新しいデバイスでのみサポートされます。
  • クライアントサイド広告は現時点ではサポートされていませんが、SSAI はサポートされています。
  • 再生速度の変更は現在このプラグインではサポートされていません。
  • 字幕トラックを選択し、Receiver 側で表示された後、送信側でシーク操作に問題が発生することがあります。
  • Chromecast with Google TV デバイスでは、字幕使用時に UI や再生に関する問題が発生する場合があります。
  • Google は非セキュア オリジン（HTTP）での Chromecast 利用をサポートしなくなったため、非セキュア コンテキストではプラグインは動作しません。この場合、プレーヤーの Chromecast ボタンは表示されません。
  • Chromecast プラグインはブラウザのキャスト機能に依存するため、以下の OS／ブラウザの組み合わせでのみサポートされます：
    • Desktop / Chrome
    • Android / Chrome
    Safari（デスクトップ / iOS）や Chrome（iOS）はサポートされていません。これらの場合、Chromecast アイコンは表示されません。
  • Google は 1 ページ内に複数の Chromecast 送信ボタンを置くことをサポートしていません。回避策としては、Brightcove Player を iframe 実装で埋め込む、または必要に応じてプレーヤーを動的に生成・破棄する方法があります。後者については以下のドキュメントを参照してください： Brightcove Player サンプル：プレーヤーの動的読み込み
  • このプラグインは Google Nest Hub へのキャストをサポートしていません。サポート対象は 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 が追加されました。

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

  • Brightcove Player Chromecast Receiver は、Receiver アプリケーションのみを含む構成になりました。
  • 従来の Chromecast 送信プラグインは、プレーヤー バージョン v7.25.0 以降でパッケージ プラグインとして利用できます。プレーヤー設定で送信プラグインを構成するには、以下のようにパッケージ プラグインを追加します： 
              "plugins": [
            {
              "name": "chromecastSender",
              "is_packaged": true,
              "options": [...]
            }
          ]

更新履歴

過去のリリースノートおよび変更履歴については、Chromecast Receiver およびプラグインのリリース情報を参照してください。

制限事項

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