次要图片

Cast 开发者可以在音频和视频应用界面中添加信息(次要)图片。请查看支持的图片格式,以实现兼容性。

辅助图片显示在显示屏的右上角,可用于显示与当前播放内容相关的其他信息(例如内容格式、电台通话标志或电视节目分级)。只要当前内容启用了此功能,并且播放器未处于空闲状态,辅助图片就会持续显示在屏幕上。

表 1 显示了在适用的设备类型和控件上启用该功能时用户的体验。音频和视频应用之间的实现和集成细节略有不同。请参阅下文,了解如何在 Web 接收器应用中集成此功能。

表 1:按内容和设备类型划分的次要图片界面
设备类型 音频内容 视频内容
Chromecast 用于加密内容的 Chromecast 加密狗的次要图片。 用于视频内容的 Chromecast 加密狗的次要图片。
Chromecast(支持 Google TV) 包含 Google TV 加密狗音频内容的 Chromecast 的次要图片。 包含 Google TV 加密狗(针对视频内容)的 Chromecast 上的次要图片。
智能显示屏 智能显示屏上用于播放音频内容的次要图片。 智能显示屏上的视频内容的次要图片。
智能显示屏远程控制 智能显示屏上针对音频内容的遥控器的次要图片。 注意:遥控器不支持视频内容。

音频

概览

音频内容的辅助图片由已加载内容的元数据驱动。加载媒体项后,对元数据的 secondaryImage 属性所做的任何后续更改都会反映在界面中。

如果智能显示屏将音频用作遥控器,则设置好的辅助图片也会显示在智能显示屏的界面上。

实现

如需设置、移除或更新次要图片,需要修改 MusicTrackMediaMetadatasecondaryImage 属性。该属性接受一个 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 会更新界面。此方法可用于处理在播放期间通过更新提供的元数据(如 EMSGID3 事件)的变化。

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

后续步骤

可以添加到网络接收器的功能到这里就结束了。您现在可以在 iOSAndroidWeb 上构建发送者应用。