Os desenvolvedores do Google Cast podem adicionar uma imagem informativa (secundária) à IU para aplicativos de áudio e vídeo. Veja os formatos de imagem compatíveis para verificar a compatibilidade.
A imagem secundária aparece no canto superior direito da tela e pode ser usada para mostrar um gráfico com mais informações sobre o conteúdo em reprodução, como o formato do conteúdo, o sinal de chamada da estação de rádio ou a classificação do programa de TV. A imagem secundária persiste na tela desde que o recurso esteja ativado para o conteúdo atual e o player não esteja em estado inativo.
A Tabela 1 mostra a experiência de um usuário quando o recurso é ativado nos tipos e controles de dispositivos aplicáveis. Os detalhes da implementação e da integração são um pouco diferentes entre os apps de áudio e vídeo. Consulte as seções abaixo para integrar esse recurso ao app receptor da Web.
Tipo de dispositivo | Conteúdo de áudio | Conteúdo em vídeo |
---|---|---|
Chromecast | ||
Chromecast com Google TV | ||
Smart display | ||
Controle remoto do smart display | Observação: imagens secundárias não são compatíveis com controles remotos para conteúdo de vídeo. |
Áudio
Informações gerais
A imagem secundária do conteúdo de áudio é impulsionada pelos metadados do conteúdo
carregado. Depois que o item de mídia for carregado, todas as mudanças subsequentes na propriedade
secondaryImage
dos metadados vão ser refletidas na interface.
Se um smart display for usado como controle remoto para áudio, a imagem secundária também vai aparecer na interface do smart display quando definida.
Implementação
Para definir, remover ou atualizar a imagem secundária, a propriedade
secondaryImage
de MusicTrackMediaMetadata
precisa ser modificada. A propriedade usa
um objeto Image
preenchido com o URL que descreve onde a imagem secundária está hospedada.
No exemplo abaixo, a imagem secundária é definida no interceptador load
. Quando
o player termina de carregar o conteúdo, a imagem secundária é exibida.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, loadRequestData => {
loadRequestData.media.metadata =
new cast.framework.messages.MusicTrackMediaMetadata();
// Set image on secondaryImage field of metadata object
loadRequestData.media.metadata.secondaryImage =
new cast.framework.messages.Image('https://www.image.png');
return loadRequestData;
});
Para atualizar a imagem secundária durante a reprodução, o aplicativo precisa usar
PlayerManager
para receber o MediaInformation
chamando
getMediaInformation
.
O aplicativo precisa modificar o metadata
atualizando a propriedade secondaryImage
para o valor desejado. Por fim,
chamar setMediaInformation
com as novas informações atualiza a IU. Esse método pode ser usado para processar
mudanças nos metadados fornecidos por atualizações como eventos EMSG
ou ID3
durante a reprodução.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage =
new cast.framework.messages.Image('http://anotherimage.png');
playerManager.setMediaInformation(mediaInformation);
});
Para cancelar a definição da imagem secundária, defina a propriedade secondaryImage
como nula no
objeto de metadados.
// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);
Video
Informações gerais
Para conteúdo em vídeo, a imagem secundária é definida e removida usando
UiManager
.
A imagem secundária é mostrada com a sobreposição de controles de vídeo.
Implementação
Para definir a imagem secundária, o aplicativo precisa receber uma instância de UiManager
e chamar
setSecondaryImage
.
Ele usa dois parâmetros: o
SecondaryImagePosition
e o URL da imagem. A definição da imagem secundária pode ser feita a qualquer momento, mas
só será exibida quando um usuário acionar a sobreposição para primeiro plano.
/**
* Sets the image url for the secondary image overlay. Replaces any image that
* was previously set.
*/
castUiManager.setSecondaryImage(
cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
'http://www.image.png');
Para remover a imagem secundária, defina o URL da imagem como null
ou uma
string vazia.
// To clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);
Próximas etapas
Chegamos ao fim dos recursos que você pode adicionar ao Web Receiver. Agora é possível criar um app remetente no iOS, Android ou Web.