媒体浏览

Cast 媒体浏览 (CMB) 功能可让智能型展示广告用户发现您的音频或视频内容目录并与之互动。CMB 通过简化网络浏览体验来增强网络接收器,该体验已专门针对智能显示屏进行了优化。

CMB 定义了标准化的模板,这些模板遵循智能显示界面惯例提供一致的浏览体验。开发者会提供数据来填充这些标准化模板。模板既支持音频内容,也支持视频内容。

入口点

CMB 有两个入口点,用户可以通过这两个界面使用轻触或语音控制浏览和选择内容。

玩家浏览

在播放过程中向上滑动,即可从应用提供的内容列表中进行选择:

视频广告系列

媒体浏览条目 - 播放器内视频 1 媒体浏览条目 - 播放器内视频 2

音频

媒体浏览条目 - 播放器音频 1 媒体浏览条目 - 播放器音频 2

着陆页浏览

当具有 cast-media-player 元素的网络接收器在智能显示屏上运行时,它会在处于空闲状态时显示 CMB。

视频和音频

媒体浏览条目 - 着陆页视频 媒体浏览条目 - 着陆页音频

正在填充内容

开发者负责使用每个内容项的数据填充每个入口点的模板。用于填充播放器浏览的内容可能与用于填充着陆页浏览的内容不同。

使用播放器内浏览功能显示与用户当前正在播放的内容或播放列表相关内容相关的内容。电视直播服务提供商也可以使用此入口点填充频道列表,以便轻松访问。

使用“着陆页浏览”功能提升对新的原创内容、当前已发布的内容或用户更感兴趣的内容的认知度。

启用媒体浏览

通过调用 setBrowseContent 提供用于浏览的媒体内容列表:

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

媒体浏览界面会在调用此方法后立即更新。

安全区域高度

启用 CMB 后,Cast SDK 界面安全区域的高度会发生变化,并且您可能需要更新现有的网络接收器界面。使用 getSafeAreaHeight 确定安全区域的高度。

// Media Browse UI enabled
controls.setBrowseContent(BrowseContent);
console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub

// Media Browse UI disabled
controls.setBrowseContent(null);
console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub

移除媒体浏览

如需移除媒体浏览界面,请将 nullsetBrowseContent 搭配使用:

controls.setBrowseContent(null);

自定义媒体浏览

浏览内容

使用 BrowseContent 自定义媒体浏览界面的标题并更新内容:

媒体浏览 - 浏览内容

答:BrowseContent.title

B. BrowseContent.items

使用 BrowseItem 在媒体浏览界面中显示每项内容的标题、副标题、时长和图片:

媒体浏览 - 浏览内容

答:BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

宽高比

使用 targetAspectRatio 为图片素材资源选择最佳宽高比。Web Receiver SDK 支持三种宽高比:

宽高比 示例
SQUARE_1_TO_1 媒体浏览 - 方形宽高比
PORTRAIT_2_TO_3 媒体浏览 - 纵向宽高比
LANDSCAPE_16_TO_9 媒体浏览 - 横向宽高比

信息

当用户从媒体浏览界面中选择一项时,网络接收器 SDK 会根据所选 BrowseItem 的值向应用发送 LOAD 消息。

示例代码

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

const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';

const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';

const items = [item1, item2];

const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    // Media browse
    controls.setBrowseContent(browseContent);
  });

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD, loadRequestData => {
    if (loadRequestData.media && loadRequestData.media.entity) {
      // Load by entity
      loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
      loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
    }
    return loadRequestData;
  });