本頁面由 Cloud Translation API 翻譯而成。

針對智慧螢幕進行最佳化

智慧螢幕是具備觸控功能的裝置，可讓網路接收器應用程式支援觸控觸控設定。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

答：--playback-logo-image

B. MovieMediaMetadata.subtitle 或 GenericMediaMetadata.subtitle。

C. MovieMediaMetadata.title 或 GenericMediaMetadata.title。

D. MediaStatus.currentTime

例如：MediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

H. 播放/暫停

一、ControlsSlot.SLOT_PRIMARY_2

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

答：--playback-logo-image

B. MusicTrackMediaMetadata.albumName

答：MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist、MusicTrackMediaMetadata.artist 或 MusicTrackMediaMetadata.composer

例如：MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

和 ControlsSlot.SLOT_SECONDARY_1

一、ControlsSlot.SLOT_PRIMARY_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)) 上維持一致的使用者介面。

設定播放器樣式

媒體瀏覽