セカンダリ画像

キャスト デベロッパーは、音声や動画アプリの情報（セカンダリ）画像を UI に追加できます。互換性を維持するためにサポートされている画像形式を表示する。

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

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

表 1: コンテンツとデバイスタイプ別のセカンダリ画像 UI
デバイスタイプ 音声コンテンツ ビデオ コンテンツ
Chromecast オーディオ コンテンツの Chromecast ドングルのセカンダリ画像。 動画コンテンツの Chromecast ドングルのセカンダリ画像。
Chromecast with Google TV Google TV ドングルを含む Chromecast 上の予備の画像（音声コンテンツ用）。 Google TV ドングルを含む動画コンテンツの Chromecast 上のセカンダリ画像。
スマートディスプレイ スマートディスプレイに表示される音声コンテンツのセカンダリ画像。 動画コンテンツのスマートディスプレイのセカンダリ画像。
スマートディスプレイのリモコン オーディオ コンテンツのスマートディスプレイ リモコンのセカンダリ画像。 注: 代替画像は、動画コンテンツのリモコンではサポートされていません。

オーディオ

概要

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

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

実装

セカンダリ イメージの設定、削除、更新を行うには、MusicTrackMediaMetadata の secondaryImage プロパティを変更する必要があります。このプロパティには Image オブジェクトがあり、セカンダリ イメージがホストされている場所を示す URL が設定されます。

以下のサンプルでは、セカンダリ 画像は 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 に追加できる機能の説明は終わりです。iOS、Android、ウェブで送信者アプリを作成できるようになりました。

前へ
ライブ
次へ
キャスト デバッグロガー