针对智能显示屏进行优化

智能显示屏是具有触摸功能的设备，允许 Web 接收器应用支持触控功能。Web Receiver SDK 提供默认界面体验，并提供额外的播放器控件自定义。

本指南介绍了如何在智能显示屏上启动时启动 Web 接收器应用，以及如何自定义播放器控件。

注意：此自定义设置需要使用内置的播放器界面 cast-media-player 元素。如果未使用此元素，则需要手动完成界面状态跟踪、品牌塑造和其他自定义设置。

访问界面控件

您可以使用以下代码访问界面控件对象：

const controls = cast.framework.ui.Controls.getInstance();

如果您未使用 cast-media-player 元素，则需要在 CastReceiverOptions 下的 UiConfig 中将 touchScreenOptimizedApp 属性设置为 true。

context.start({
  uiConfig: {
    touchScreenOptimizedApp: true
  }
});

默认视频界面

默认控件按钮将根据 MetadataType 和 MediaStatus.supportedMediaCommands 分配给每个槽。

MetadataType.Movie、MetadataType.Generic

A. --playback-logo-image

B. MovieMediaMetadata.subtitle 或 GenericMediaMetadata.subtitle。

C. MovieMediaMetadata.title 或 GenericMediaMetadata.title。

D. MediaStatus.currentTime

E. MediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

H.播放/暂停

I. 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 移除现有命令。

默认音频界面

元数据类型.MUSIC_TRACK

A. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

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

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. ControlsSlot.SLOT_SECONDARY_1

I. ControlsSlot.SLOT_PRIMARY_1

J. 播放/暂停

K. ControlsSlot.SLOT_PRIMARY_2

L. ControlsSlot.SLOT_SECONDARY_2

当 supportedMediaCommands 的值等于 ALL_BASIC_MEDIA 时，默认控件布局将如下所示：

当 supportedMediaCommands 的值等于 ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT 时，默认控件布局将如下所示：

如需在启动 Web 接收器上下文后动态更改 supportedMediaCommands 的值，您可以调用 PlayerManager.setSupportedMediaCommands 来替换该值。此外，您也可以使用 addSupportedMediaCommands 添加新命令，也可以使用 removeSupportedMediaCommands 移除现有命令。

自定义界面控件按钮布局

如果您想要在界面控件中更改按钮，请使用自定义布局。

重要提示：在为槽分配控制按钮之前，必须移除所有默认按钮，以免自定义布局与默认布局发生冲突。

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 接收器上下文后动态更改 supportedMediaCommands 的值，您可以调用 PlayerManager.setSupportedMediaCommands 来替换该值。此外，您可以使用 addSupportedMediaCommands 添加新命令，也可以使用 removeSupportedMediaCommands 移除现有命令。

次要图片

借助次要图片功能，Cast 开发者可以灵活地向音频和视频应用添加信息图片，从而显示本地频道徽标或媒体格式。此新功能的开销非常低，同时可在不同的投放显示平台（Chromecast、智能显示屏和 Chromecast（支持 Google TV）上）保持一致的界面。