投放服務開發人員可以在音訊和影片應用程式的 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);