Cast 开发者可以在音频和视频应用界面中添加信息(次要)图片。请查看支持的图片格式,以实现兼容性。
辅助图片显示在显示屏的右上角,可用于显示与当前播放内容相关的其他信息(例如内容格式、电台通话标志或电视节目分级)。只要当前内容启用了此功能,并且播放器未处于空闲状态,辅助图片就会持续显示在屏幕上。
表 1 显示了在适用的设备类型和控件上启用该功能时用户的体验。音频和视频应用之间的实现和集成细节略有不同。请参阅下文,了解如何在 Web 接收器应用中集成此功能。
设备类型 | 音频内容 | 视频内容 |
---|---|---|
Chromecast |
![]() |
![]() |
Chromecast(支持 Google TV) |
![]() |
![]() |
智能显示屏 |
![]() |
![]() |
智能显示屏远程控制 |
![]() |
注意:遥控器不支持视频内容。 |
音频
概览
音频内容的辅助图片由已加载内容的元数据驱动。加载媒体项后,对元数据的 secondaryImage
属性所做的任何后续更改都会反映在界面中。
如果智能显示屏将音频用作遥控器,则设置好的辅助图片也会显示在智能显示屏的界面上。
实现
如需设置、移除或更新次要图片,需要修改 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;
});
如需在播放期间更新次要图片,应用应使用 PlayerManager
通过调用 getMediaInformation
获取 MediaInformation
。然后,应用应通过将 secondaryImage
属性更新为所需值来修改 metadata
。最后,使用新信息调用 setMediaInformation
会更新界面。此方法可用于处理在播放期间通过更新提供的元数据(如 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
属性设置为 null。
// 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);