セカンダリ画像

キャスト デベロッパーは、音声アプリや動画アプリの UI に情報(セカンダリ)画像を追加できます。互換性については、サポートされている画像形式を確認してください。

セカンダリ画像はディスプレイの右上に表示され、コンテンツ形式、ラジオ局のコールサイン、テレビ番組のレーティングなど、現在再生中のコンテンツに関する追加情報とともにグラフィックを表示するために使用できます。セカンダリ画像は、現在のコンテンツに対して機能が有効になっており、プレーヤーがアイドル状態でない限り、画面に表示されます。

表 1 は、該当するデバイスタイプとコントロールでこの機能を有効にした場合のユーザー エクスペリエンスを示しています。実装と統合の詳細は、オーディオ アプリと動画アプリで若干異なります。この機能を Web Receiver アプリに統合する方法については、以下のセクションをご覧ください。

表 1: セカンダリ画像の UI(コンテンツとデバイスタイプ別)
デバイスの種類 オーディオ コンテンツ ビデオ コンテンツ
Chromecast Chromecast ドングルのオーディオ コンテンツ用セカンダリ画像。 動画コンテンツ用の Chromecast ドングルのセカンダリ画像。
Chromecast with Google TV 音声コンテンツ用の Google TV ドングル付きの Chromecast のセカンダリ画像。 動画コンテンツ用の Google TV ドングル付きの Chromecast のセカンダリ画像。
スマートディスプレイ 音声コンテンツ用のスマートディスプレイに表示されるセカンダリ画像。 動画コンテンツのスマートディスプレイに表示されるセカンダリ画像。
スマートディスプレイ リモコン 音声コンテンツ用のスマートディスプレイのリモコンにあるセカンダリ画像。 注: 動画コンテンツのリモコンではセカンダリ画像はサポートされていません。

音声

概要

音声コンテンツのセカンダリ画像は、読み込まれたコンテンツのメタデータによって駆動されます。メディア アイテムが読み込まれると、メタデータの secondaryImage プロパティに対する以降の変更は、UI に反映されます。

スマートディスプレイを音声のリモコンとして使用している場合、設定すると、セカンダリ画像がスマートディスプレイの UI にも表示されます。

実装

セカンダリ画像を設定、削除、更新するには、MusicTrackMediaMetadatasecondaryImage プロパティを変更する必要があります。このプロパティは、セカンダリ画像がホストされている場所を表す URL が入力された Image オブジェクトを受け取ります。

以下のサンプルでは、セカンダリ画像が load インターセプタに設定されています。プレーヤーがコンテンツの読み込みを完了すると、セカンダリ画像が表示されます。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

再生中にセカンダリ画像を更新するには、アプリは PlayerManager を使用して getMediaInformation を呼び出して MediaInformation を取得する必要があります。次に、アプリケーションは secondaryImage プロパティを目的の値に更新して、metadata を変更する必要があります。最後に、新しい情報で setMediaInformation を呼び出すと、UI が更新されます。このメソッドを使用すると、再生中の EMSG イベントや ID3 イベントなどの更新を通じて提供されるメタデータの変更を処理できます。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

セカンダリ画像の設定を解除するには、メタデータ オブジェクトの secondaryImage プロパティを null に設定します。

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

動画

概要

動画コンテンツの場合、UiManager を使用してセカンダリ画像を設定し、削除します。セカンダリ画像は、動画コントロール オーバーレイとともに表示されます。

実装

セカンダリ イメージを設定するには、アプリで UiManager のインスタンスを取得して setSecondaryImage を呼び出す必要があります。これは、SecondaryImagePosition と画像の URL の 2 つのパラメータを取ります。セカンダリ画像はいつでも設定できますが、ユーザーがオーバーレイをフォアグラウンド表示にトリガーした場合にのみ表示されます。

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

セカンダリ イメージを削除するには、画像の URL を null または空の文字列に設定します。

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

次のステップ

Web Receiver に追加できる機能はここまでです。iOSAndroidウェブで送信者アプリを作成できるようになりました。