Cast 媒体浏览 (CMB) 功能可让智能型展示广告用户发现您的音频或视频内容目录并与之互动。CMB 通过简化网络浏览体验来增强网络接收器,该体验已专门针对智能显示屏进行了优化。
CMB 定义了标准化的模板,这些模板遵循智能显示界面惯例提供一致的浏览体验。开发者会提供数据来填充这些标准化模板。模板既支持音频内容,也支持视频内容。
入口点
CMB 有两个入口点,用户可以通过这两个界面使用轻触或语音控制浏览和选择内容。
玩家浏览
在播放过程中向上滑动,即可从应用提供的内容列表中进行选择:
视频广告系列
音频
着陆页浏览
当具有 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
移除媒体浏览
如需移除媒体浏览界面,请将 null
与 setBrowseContent
搭配使用:
controls.setBrowseContent(null);
自定义媒体浏览
浏览内容
使用 BrowseContent
自定义媒体浏览界面的标题并更新内容:
使用 BrowseItem
在媒体浏览界面中显示每项内容的标题、副标题、时长和图片:
宽高比
使用 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;
});