智能显示屏是具有触摸功能的设备,允许 Web 接收器应用支持触控功能。Web Receiver SDK 提供默认界面体验,并提供额外的播放器控件自定义。
本指南介绍了如何在智能显示屏上启动时启动 Web 接收器应用,以及如何自定义播放器控件。
访问界面控件
您可以使用以下代码访问界面控件对象:
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
B. MovieMediaMetadata.subtitle
或 GenericMediaMetadata.subtitle
。
C. MovieMediaMetadata.title
或 GenericMediaMetadata.title
。
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
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
、MusicTrackMediaMetadata.artist
或 MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
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)上)保持一致的界面。