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);