Navegação de mídia

O recurso de navegação de mídia do Google Cast (CMB, na sigla em inglês) é um recurso que permite aos usuários inteligentes da Rede de Display descobrirem e interagirem com seu catálogo de conteúdo de áudio ou vídeo. O CMB faz isso melhorando o Web Receiver com uma experiência de navegação simplificada sintonizada especialmente para smart displays.

O CMB define modelos padronizados que oferecem uma experiência de navegação consistente que segue as convenções da IU do smart display. Os desenvolvedores fornecem dados para preencher esses modelos padronizados. Os modelos oferecem suporte a conteúdo de áudio e vídeo ou uma combinação de ambos.

Pontos de entrada

Há dois pontos de entrada para a CMB, a partir dos quais o usuário pode navegar e selecionar conteúdo usando o controle por toque ou por voz.

Navegação no player

Deslize para cima durante a reprodução para escolher em uma lista de conteúdo fornecido pelo aplicativo:

Vídeo

Áudio

Procurar na página de destino

Quando um receptor da Web com o elemento cast-media-player está em execução em smart displays, ele mostra o CMB no estado IDLE.

Áudio e vídeo

Preenchendo conteúdo

Os desenvolvedores são responsáveis por preencher o modelo de cada ponto de entrada com dados para cada item de conteúdo. O conteúdo usado para preencher o navegador no player pode ser diferente do usado para preencher a página de destino.

Use a exibição no player para exibir itens relacionados ao conteúdo em reprodução no momento ou itens de uma playlist. Os provedores de TV ao vivo também podem usar esse ponto de entrada para preencher uma lista de canais para fácil acesso.

Use a navegação na página de destino para aumentar o reconhecimento de novo conteúdo original, publicado atualmente ou em conteúdo que pode ser de maior interesse para seu usuário.

Aviso: para evitar problemas de desempenho, a contagem máxima de itens de navegação por mídia é de 30 itens.

Ativar busca de mídia

Forneça uma lista de conteúdo de mídia para navegação chamando setBrowseContent:

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

A IU do navegador de mídia é atualizada imediatamente após a chamada desse método.

Altura da área segura

Quando a CMB está ativada, a altura da área segura da IU do SDK do Cast muda e pode ser necessário atualizar a IU existente do Web Receiver. Use getSafeAreaHeight para determinar a altura da á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

Remover busca de mídia

Para remover a IU de navegação de mídia, use null com setBrowseContent:

controls.setBrowseContent(null);

Personalizar a navegação de mídia

Navegação por conteúdo

Use o método BrowseContent para personalizar o título da IU do navegador de mídia e atualizar os itens:

A. BrowseContent.title

B. BrowseContent.items

Use o método BrowseItem para exibir título, subtítulo, duração e imagem em cada item na IU de navegação de mídia:

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

Proporção

Use targetAspectRatio para selecionar a melhor proporção para os recursos de imagem. O SDK do receptor da Web oferece suporte a três proporções:

Proporção	Exemplo
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

Mensagens

Quando um usuário seleciona um dos itens da IU de navegação de mídia, o SDK do receptor da Web envia uma mensagem LOAD para o aplicativo de acordo com os valores da BrowseItem selecionada.

Código de amostra

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