Exploración multimedia

Cast Media Browse (CMB) es una función que permite a los usuarios de pantallas inteligentes descubrir e interactuar con tu catálogo de contenido de audio o video. Para hacerlo, CMB mejora el receptor web con una experiencia de navegación optimizada que se ajusta especialmente para pantallas inteligentes.

CMB define plantillas estandarizadas que brindan una experiencia de navegación coherente que sigue las convenciones de la IU de pantallas inteligentes. Los desarrolladores proporcionan datos para propagar estas plantillas estandarizadas. Las plantillas admiten contenido de audio y video, o bien una combinación de ambos.

Puntos de entrada

Hay dos puntos de entrada de CMB, desde los que un usuario puede explorar y seleccionar contenido mediante el control táctil o por voz.

Navegación en el reproductor

Desliza el dedo hacia arriba durante la reproducción para elegir entre una lista del contenido de la aplicación:

Video

Entrada de exploración de medios - En el reproductor de video 1 Entrada de exploración de medios - En el reproductor de video 2

Audio

Entrada de exploración multimedia - En el reproductor de audio 1 Entrada de exploración de medios - En el reproductor de audio 2

Navegación de la página de destino

Cuando un receptor web con el elemento cast-media-player se ejecuta en pantallas inteligentes, muestra CMB en estado IDLE.

Video y audio

Entrada de exploración multimedia: video de la página de destino Entrada de exploración multimedia: audio de la página de destino

Propagando contenido

Los desarrolladores son responsables de propagar la plantilla de cada punto de entrada con datos de cada elemento de contenido. El contenido que se usa para propagar la exploración en el reproductor puede ser diferente del que se usa para completar la exploración de la página de destino.

Usa la navegación en el reproductor para mostrar elementos relacionados con el contenido que un usuario está reproduciendo actualmente o elementos de una lista de reproducción. Los proveedores de TV en vivo también pueden usar este punto de entrada para propagar una lista de canales y facilitar el acceso.

Usa la exploración de la página de destino para dar a conocer el contenido original nuevo, el contenido que está publicado actualmente o el que podría ser de mayor interés para el usuario.

Habilitar exploración multimedia

Para proporcionar una lista de contenidos multimedia para navegar, llama a setBrowseContent:

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

La IU de exploración multimedia se actualiza inmediatamente después de llamar a este método.

Altura del área segura

Cuando CMB está habilitado, la altura de la IU del SDK de Cast cambia y es posible que debas actualizar la IU del receptor web existente. Usa getSafeAreaHeight para determinar la altura del área segura.

// 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

Eliminar exploración multimedia

Para quitar la IU de exploración multimedia, usa null con setBrowseContent:

controls.setBrowseContent(null);

Personalizar exploración multimedia

Explorando contenido

Usa BrowseContent para personalizar el título de la IU de exploración multimedia y actualizar los elementos:

Explorar contenido multimedia: explorar contenido

A. BrowseContent.title

B. BrowseContent.items

Usa BrowseItem para mostrar el título, los subtítulos, la duración y la imagen de cada elemento en la IU de exploración multimedia:

Exploración multimedia: buscar elemento

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

Relación de aspecto

Usa targetAspectRatio a fin de seleccionar la mejor relación de aspecto para tus elementos de imagen. El SDK de receptor web admite tres relaciones de aspecto:

Relación de aspecto Ejemplo
SQUARE_1_TO_1 Navegación de medios: relación de aspecto cuadrada
PORTRAIT_2_TO_3 Exploración multimedia: relación de aspecto vertical
LANDSCAPE_16_TO_9 Exploración multimedia: proporción horizontal

Mensajes

Cuando un usuario selecciona uno de los elementos de la IU de exploración multimedia, el SDK de receptor web envía un mensaje de LOAD a la aplicación de acuerdo con los valores del BrowseItem seleccionado.

Código de muestra

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