キャスト デベロッパーは、音声アプリや動画アプリの UI に情報(セカンダリ)画像を追加できます。互換性については、サポートされている画像形式を確認してください。
セカンダリ画像はディスプレイの右上に表示され、コンテンツ形式、ラジオ局のコールサイン、テレビ番組のレーティングなど、現在再生中のコンテンツに関する追加情報とともにグラフィックを表示するために使用できます。セカンダリ画像は、現在のコンテンツに対して機能が有効になっており、プレーヤーがアイドル状態でない限り、画面に表示されます。
表 1 は、該当するデバイスタイプとコントロールでこの機能を有効にした場合のユーザー エクスペリエンスを示しています。実装と統合の詳細は、オーディオ アプリと動画アプリで若干異なります。この機能を Web Receiver アプリに統合する方法については、以下のセクションをご覧ください。
デバイスの種類 | オーディオ コンテンツ | ビデオ コンテンツ |
---|---|---|
Chromecast | ||
Chromecast with Google TV | ||
スマートディスプレイ | ||
スマートディスプレイ リモコン | 注: 動画コンテンツのリモコンではセカンダリ画像はサポートされていません。 |
音声
概要
音声コンテンツのセカンダリ画像は、読み込まれたコンテンツのメタデータによって駆動されます。メディア アイテムが読み込まれると、メタデータの secondaryImage
プロパティに対する以降の変更は、UI に反映されます。
スマートディスプレイを音声のリモコンとして使用している場合、設定すると、セカンダリ画像がスマートディスプレイの UI にも表示されます。
実装
セカンダリ画像を設定、削除、更新するには、MusicTrackMediaMetadata
の secondaryImage
プロパティを変更する必要があります。このプロパティは、セカンダリ画像がホストされている場所を表す 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 に追加できる機能はここまでです。iOS、Android、ウェブで送信者アプリを作成できるようになりました。