智慧螢幕是具備觸控功能的裝置,可讓網路接收器應用程式支援觸控觸控設定。Web Receiver SDK 提供預設的 UI 體驗,並可進一步自訂播放器控制項。
本指南說明如何在智慧螢幕上啟動時最佳化您的 Web Receiver 應用程式,以及如何自訂播放器控制項。
存取使用者介面控制項
UI 控制項物件可以使用下列程式碼存取:
const controls = cast.framework.ui.Controls.getInstance();
如果您不使用 cast-media-player
元素,就必須在 CastReceiverOptions
的 UiConfig
中,將 touchScreenOptimizedApp
屬性設為 true
。
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
預設影片 UI
系統會根據 MetadataType
和 MediaStatus.supportedMediaCommands
為每個運算單元指派預設控制按鈕。
MetadataType.Movie、MetadataType.Generic
B. MovieMediaMetadata.subtitle
或 GenericMediaMetadata.subtitle
。
C. MovieMediaMetadata.title
或 GenericMediaMetadata.title
。
F. ControlsSlot.SLOT_SECONDARY_1
G. ControlsSlot.SLOT_PRIMARY_1
H. 播放/暫停
J. ControlsSlot.SLOT_SECONDARY_2
當 supportedMediaCommands
的值等於 ALL_BASIC_MEDIA
時,預設的控制項版面配置將如下所示:
當 supportedMediaCommands
的值等於 ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
時,預設控製版面配置會顯示如下:
當 supportedMediaCommands
的值等於 PAUSE | QUEUE_PREV | QUEUE_NEXT
時,預設控製版面配置會顯示如下:
有文字音軌可用時,隱藏式輔助字幕按鈕一律會顯示在 SLOT_SECONDARY_1
中。
如要在啟動接收器結構定義後動態變更 supportedMediaCommands
的值,您可以呼叫 PlayerManager.setSupportedMediaCommands
以覆寫該值。此外,您可以使用 addSupportedMediaCommands
來新增指令,也可以使用 removeSupportedMediaCommands
移除現有指令。
預設音訊 UI
MetadataType.MUSIC_TRACK
B. MusicTrackMediaMetadata.albumName
答:MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
、MusicTrackMediaMetadata.artist
或 MusicTrackMediaMetadata.composer
例如:MusicTrackMediaMetadata.images[0]
和 ControlsSlot.SLOT_SECONDARY_1
的播放/暫停
K. ControlsSlot.SLOT_PRIMARY_2
L ControlsSlot.SLOT_SECONDARY_2
當 supportedMediaCommands
的值等於 ALL_BASIC_MEDIA
時,預設的控制項版面配置將如下所示:
當 supportedMediaCommands
的值等於 ALL_BASIC_MEDIA |
QUEUE_PREV | QUEUE_NEXT
時,預設控製版面配置會顯示如下:
如要在啟動 Web Receiver 結構定義後動態變更 supportedMediaCommands
的值,您可以呼叫 PlayerManager.setSupportedMediaCommands
以覆寫該值。此外,您可以使用 addSupportedMediaCommands
新增指令,也可以使用 removeSupportedMediaCommands
移除現有指令。
自訂 UI 控制按鈕版面配置
如果您想要變更 UI 控制項中的按鈕,請使用自訂版面配置。
const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();
接著,請呼叫 assignButton
,將控制按鈕指派給 4 個運算單元。
controls.assignButton(
cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
cast.framework.ui.ControlsButton.LIKE
)
controls.assignButton(
cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
cast.framework.ui.ControlsButton.DISLIKE
)
自訂版面配置的顯示方式如下:
當 MediaStatus.supportedMediaCommands
不支援指派的按鈕時,該按鈕會顯示為灰色。舉例來說,如果 supportedMediaCommands
等於 ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE
,系統就會停用 QUEUE_PREV
按鈕。
如要在啟動 Web Receiver 結構定義後動態變更 supportedMediaCommands
的值,您可以呼叫 PlayerManager.setSupportedMediaCommands
以覆寫該值。此外,您可以使用 addSupportedMediaCommands
來新增指令,也可以使用 removeSupportedMediaCommands
移除現有指令。
次要圖片
「次要圖片」可讓 Cast 開發人員靈活地在音訊和影片應用程式 UI 中加入資訊圖片,以顯示當地頻道標誌或媒體格式。這項新功能提供的負擔相當低,而且在不同的 Cast 顯示平台 (Chromecast、智慧螢幕和 Chromecast (支援 Google TV)) 上維持一致的使用者介面。