投放服務開發人員可以在音訊和影片應用程式的 UI 中加入資訊 (次要) 映像檔。請參閱支援的圖片格式以瞭解相容性。
次要圖片會顯示在螢幕右上方，可用於顯示含有目前播放內容相關資訊的圖形，例如內容格式、廣播電台呼號或電視節目分級。只要當前內容已啟用這項功能，且玩家未處於閒置狀態，次要圖片就會在畫面上持續顯示。
表 1 說明在適用的裝置類型和控制項上啟用這項功能後，使用者的使用體驗。音訊和影片應用程式的實作和整合細節略有不同。如要瞭解如何在 Web Receiver 應用程式中整合這項功能，請參閱以下各節的說明。
| 裝置類型 | 音訊內容 | 影片內容 |
|---|---|---|
| Chromecast |
|
|
| Chromecast (支援 Google TV) |
|
|
| 智慧螢幕 |
|
|
| 智慧螢幕遙控器 |
|
注意：影片內容的遙控器不支援次要圖片。 |
音訊
總覽
音訊內容的次要圖片是由已載入內容的中繼資料所驅動。載入媒體項目後，任何對中繼資料的 secondaryImage 屬性所做的變更，都會反映在 UI 上。
使用智慧螢幕做為音訊的遙控器時，次要圖片也會在設定時顯示在智慧螢幕的 UI 上。
導入作業
如要設定、移除或更新次要映像檔，您必須修改 MusicTrackMediaMetadata 的 secondaryImage 屬性。屬性會採用已填入次要圖片代管位置網址的 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;
});
如要在播放期間更新次要圖片，應用程式應呼叫 getMediaInformation 以使用 PlayerManager 取得 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 屬性設為空值。
// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);
影片
總覽
針對影片內容，系統會使用 UiManager 設定及移除次要圖片。次要圖片會與影片控制項重疊顯示。
導入作業
如要設定次要映像檔，應用程式必須取得 UiManager 的執行個體並呼叫 setSecondaryImage。這會使用兩個參數：SecondaryImagePosition 和圖片的網址。您隨時可以設定次要圖片，但只會在使用者觸發重疊畫面時顯示。
/**
* 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');
將圖片網址設為 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);