Los desarrolladores de Cast pueden agregar una imagen informativa (secundaria) a la IU para las aplicaciones de audio y video. Consulta los formatos de imagen admitidos para verificar la compatibilidad.
La imagen secundaria aparece en la parte superior derecha de la pantalla y se puede usar para mostrar un gráfico con información adicional sobre el contenido que se está reproduciendo en ese momento, como el formato del contenido, el indicativo de la estación de radio o la clasificación del programa de TV. La imagen secundaria permanecerá en la pantalla siempre que la función esté habilitada para el contenido actual y el reproductor no se encuentre en estado inactivo.
En la Tabla 1, se muestra la experiencia del usuario cuando la función está habilitada en los tipos de dispositivos y controles aplicables. Los detalles de implementación e integración difieren un poco entre las apps de audio y video. Consulta las secciones a continuación para integrar esta función en tu app de Web Receiver.
Tipo de dispositivo | Contenido de audio | Contenido de anuncios de video |
---|---|---|
Chromecast | ||
Chromecast con Google TV | ||
Pantalla inteligente | ||
Control remoto de pantalla inteligente | Nota: Las imágenes secundarias no son compatibles con los controles remotos para el contenido de video. |
Audio
Descripción general
La imagen secundaria para el contenido de audio se controla mediante los metadatos del contenido cargado. Una vez que se carga el elemento multimedia, cualquier cambio posterior en la propiedad secondaryImage
de los metadatos se refleja en la IU.
Si se usa una pantalla inteligente como control remoto para el audio, la imagen secundaria también aparecerá en la IU de la pantalla cuando se configure.
Implementación
Para configurar, quitar o actualizar la imagen secundaria, se debe modificar la propiedad secondaryImage
de MusicTrackMediaMetadata
. La propiedad toma un objeto Image
propagado con la URL que describe dónde se aloja la imagen secundaria.
En el siguiente ejemplo, la imagen secundaria se configura en el interceptor load
. Cuando el reproductor termina de cargar el contenido, se muestra la imagen secundaria.
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 actualizar la imagen secundaria durante la reproducción, la aplicación debe usar PlayerManager
y obtener el MediaInformation
llamando a getMediaInformation
.
Luego, la aplicación debe modificar el metadata
actualizando la propiedad secondaryImage
al valor deseado. Por último, si llamas a setMediaInformation
con la nueva información, se actualizará la IU. Este método se puede usar para manejar cambios en los metadatos que se proporcionan a través de actualizaciones, como los eventos EMSG
o ID3
durante la reproducción.
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 quitar la imagen secundaria, establece la propiedad secondaryImage
como nula en el objeto de metadatos.
// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);
Video
Descripción general
Para el contenido de video, la imagen secundaria se configura y quita con UiManager
.
La imagen secundaria se muestra con los controles de video superpuestos.
Implementación
Para establecer la imagen secundaria, la aplicación debe obtener una instancia de UiManager
y llamar a setSecondaryImage
.
Requiere dos parámetros: SecondaryImagePosition
y la URL de la imagen. La imagen secundaria se puede configurar en cualquier momento, pero solo se mostrará cuando un usuario active la superposición para que se muestre en primer 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 quitar la imagen secundaria, configura la URL de la imagen como null
o una string vacía.
// 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óximos pasos
Con esto concluye las funciones que puedes agregar a tu receptor web. Ahora puedes compilar una app emisora en iOS, Android o la Web.