媒體瀏覽

投放媒體瀏覽 (CMB) 功能可讓智慧螢幕的使用者探索音訊或影片內容目錄，並進行互動。CMB 強化了 Web Receiver，所提供的網路瀏覽體驗都經過特別設計，專為智慧型螢幕量身打造。

CMB 定義了標準化的範本，以一致的智慧螢幕 UI 慣例提供一致的瀏覽體驗。開發人員提供資料，填入這些標準化範本。範本可支援音訊和影片內容，或同時支援這兩種做法。

進入點

CMB 有兩個進入點，可讓使用者透過觸控或語音控制功能來瀏覽及選取內容。

遊戲內瀏覽

在播放過程中向上滑動，即可從應用程式提供的清單中選擇內容：

影片

音訊

到達網頁瀏覽

在智慧螢幕上執行 cast-media-player 元素的網路接收器時，在處於閒置狀態時會顯示 CMB。

影片和音訊

正在新增內容

開發人員負責為每個各個進入點填入一個範本，包含每個內容項目的資料。用於填入玩家瀏覽功能的內容可能與用於填入到達網頁瀏覽的內容不同。

使用播放器瀏覽功能，顯示與目前播放的內容或播放清單項目相關的項目。直播電視節目供應商也會使用這個進入點填入頻道清單，方便使用者存取。

您可以利用到達網頁瀏覽功能，提高全新原創內容、目前推出的內容，或是使用者可能感興趣的內容。

警告：為避免效能問題，媒體瀏覽項目的數量上限為 30 個項目。

啟用媒體瀏覽

透過呼叫 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 的標題並更新項目：

答：BrowseContent.title

的BrowseContent.items

使用 BrowseItem 顯示媒體瀏覽 UI 中每個項目的標題、子標題、時間長度和圖片：

答：BrowseItem.image

的BrowseItem.duration

的平面藝術作品BrowseItem.title

D. BrowseItem.subtitle

顯示比例

使用 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;
  });