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