キャスト デベロッパーは、音声や動画アプリの情報(セカンダリ)画像を UI に追加できます。互換性を維持するためにサポートされている画像形式を表示する。
セカンダリ画像はディスプレイの右上に表示され、再生中のコンテンツに関する追加情報(コンテンツ形式、ラジオ局の通話標識、テレビ番組のレーティングなど)をグラフィックに表示するために使用されます。現在のコンテンツでこの機能が有効になっており、プレーヤーがアイドル状態でない限り、セカンダリ画像は画面上に残ります。
表 1 は、該当するデバイスタイプとコントロールで機能が有効になっている場合のユーザー エクスペリエンスを示しています。実装と統合の詳細は、音声アプリと動画アプリでわずかに異なります。Web Receiver アプリにこの機能を統合するには、以下のセクションをご覧ください。
デバイスタイプ | 音声コンテンツ | ビデオ コンテンツ |
---|---|---|
Chromecast |
![]() |
![]() |
Chromecast with Google TV |
![]() |
![]() |
スマートディスプレイ |
![]() |
![]() |
スマートディスプレイのリモコン |
![]() |
注: 代替画像は、動画コンテンツのリモコンではサポートされていません。 |
オーディオ
概要
音声コンテンツのセカンダリ画像は、読み込まれたコンテンツのメタデータによって駆動されます。メディア アイテムが読み込まれると、メタデータの 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、ウェブで送信者アプリを作成できるようになりました。