投放媒體瀏覽 (CMB) 功能可讓智慧螢幕的使用者探索音訊或影片內容目錄,並進行互動。CMB 強化了 Web Receiver,所提供的網路瀏覽體驗都經過特別設計,專為智慧型螢幕量身打造。
CMB 定義了標準化的範本,以一致的智慧螢幕 UI 慣例提供一致的瀏覽體驗。開發人員提供資料,填入這些標準化範本。範本可支援音訊和影片內容,或同時支援這兩種做法。
進入點
CMB 有兩個進入點,可讓使用者透過觸控或語音控制功能來瀏覽及選取內容。
遊戲內瀏覽
在播放過程中向上滑動,即可從應用程式提供的清單中選擇內容:
影片
音訊
到達網頁瀏覽
在智慧螢幕上執行 cast-media-player
元素的網路接收器時,在處於閒置狀態時會顯示 CMB。
影片和音訊
正在新增內容
開發人員負責為每個各個進入點填入一個範本,包含每個內容項目的資料。用於填入玩家瀏覽功能的內容可能與用於填入到達網頁瀏覽的內容不同。
使用播放器瀏覽功能,顯示與目前播放的內容或播放清單項目相關的項目。直播電視節目供應商也會使用這個進入點填入頻道清單,方便使用者存取。
您可以利用到達網頁瀏覽功能,提高全新原創內容、目前推出的內容,或是使用者可能感興趣的內容。
啟用媒體瀏覽
透過呼叫 setBrowseContent
提供要瀏覽的媒體內容清單:
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
「媒體瀏覽」使用者介面會在呼叫這個方法後立即更新。
安全區域高度
啟用 CMB 時,Cast SDK UI 安全區域的高度會改變,您可能需要更新現有的 Web Receiver UI。使用 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
移除媒體瀏覽
如要移除媒體瀏覽 UI,請將 null
與 setBrowseContent
搭配使用:
controls.setBrowseContent(null);
自訂媒體瀏覽
瀏覽內容
使用 BrowseContent
自訂媒體瀏覽 UI 的標題並更新項目:
使用 BrowseItem
顯示媒體瀏覽 UI 中每個項目的標題、子標題、時間長度和圖片:
的平面藝術作品
BrowseItem.title
顯示比例
使用 targetAspectRatio
選取圖片素材資源的最佳長寬比。Web Receiver SDK 支援三種長寬比:
長寬比 | 範例 |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
訊息
當使用者從媒體瀏覽 UI 中選取其中一個項目時,Web Receiver 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;
});