Просмотр медиа

Cast Media Browse (CMB) — это функция, которая позволяет пользователям интеллектуальных дисплеев находить ваш каталог аудио- или видеоконтента и взаимодействовать с ним. CMB делает это, улучшая веб-приемник с помощью упрощенного просмотра, специально настроенного для интеллектуальных дисплеев.

CMB определяет стандартизированные шаблоны, обеспечивающие единообразный просмотр в соответствии с соглашениями пользовательского интерфейса интеллектуального дисплея. Разработчики предоставляют данные для заполнения этих стандартизированных шаблонов. Шаблоны поддерживают аудио- и видеоконтент или их сочетание.

Точки входа

Для CMB есть две точки входа, из которых пользователь может просматривать и выбирать контент с помощью сенсорного или голосового управления.

Просмотр в плеере

Проведите пальцем вверх во время воспроизведения, чтобы выбрать из списка контент, предоставленный приложением:

видео

Аудио

Просмотр целевой страницы

Когда веб-приемник с элементом cast-media-player работает на смарт-дисплеях, он показывает CMB в состоянии IDLE.

Видео и аудио

Заполнение контента

Разработчики несут ответственность за заполнение шаблона для каждой точки входа данными для каждого элемента контента. Содержимое, используемое для заполнения окна просмотра в проигрывателе, может отличаться от содержимого, используемого для заполнения поля просмотра целевой страницы.

Используйте просмотр в проигрывателе для отображения элементов, относящихся к содержимому, которое в данный момент воспроизводит пользователь, или элементам списка воспроизведения. Провайдеры прямого эфира также могут использовать эту точку входа для заполнения списка каналов для быстрого доступа.

Используйте обзор целевых страниц, чтобы повысить осведомленность о новом оригинальном контенте, контенте, который в настоящее время доступен, или контенте, который может быть интересен вашему пользователю.

Предупреждение. Во избежание проблем с производительностью максимальное количество элементов в окне просмотра мультимедиа составляет 30 элементов.

Включить просмотр мультимедиа

Предоставьте список содержимого мультимедиа для просмотра, вызвав setBrowseContent :

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

Пользовательский интерфейс Media Browse обновляется сразу после вызова этого метода.

Высота безопасной зоны

Когда 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

Удалить просмотр мультимедиа

Чтобы удалить пользовательский интерфейс Media Browse, используйте null с setBrowseContent :

controls.setBrowseContent(null);

Настроить просмотр мультимедиа

Просмотр содержимого

Используйте BrowseContent , чтобы настроить заголовок пользовательского интерфейса Media Browse и обновить элементы:

А. BrowseContent.title

B. BrowseContent.items

Используйте BrowseItem , чтобы отобразить заголовок, подзаголовок, продолжительность и изображение для каждого элемента в пользовательском интерфейсе Media Browse:

А. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

Соотношение сторон

Используйте targetAspectRatio , чтобы выбрать наилучшее соотношение сторон для ваших изображений. SDK Web Receiver поддерживает три соотношения сторон:

Соотношение сторон	Пример
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

Сообщения

Когда пользователь выбирает один из элементов в пользовательском интерфейсе Media Browse, SDK Web Receiver отправляет сообщение LOAD в приложение в соответствии со значениями выбранного BrowseItem .

Образец кода

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