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

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

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

Точки входа

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

Просмотр в игре

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

Видео

Аудио

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

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

Видео и аудио

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

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

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

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

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

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

Предоставьте список медиаконтента для просмотра, вызвав 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 , чтобы настроить заголовок пользовательского интерфейса просмотра мультимедиа и обновить элементы:

A. BrowseContent.title

Б. BrowseContent.items

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

А. BrowseItem.image

Б. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

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

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

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

Сообщения

Когда пользователь выбирает один из элементов в пользовательском интерфейсе просмотра мультимедиа, пакет SDK веб-приемника отправляет приложению сообщение 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;
  });