Imagen secundaria

Los desarrolladores de Cast pueden agregar una imagen informativa (secundaria) a la IU para aplicaciones de audio y video. Consulta la compatibilidad de los formatos de imagen compatibles.

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 reproduce actualmente, como el formato del contenido, el indicador de llamada de la estación de radio o la clasificación del programa de TV. La imagen secundaria persiste en la pantalla siempre que la función esté habilitada para el contenido actual y el reproductor no esté en estado inactivo.

En la Tabla 1, se muestra la experiencia de un usuario cuando la función está habilitada en los controles y tipos de dispositivos aplicables. Los detalles de la implementación y la 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 receptor web.

Tabla 1: IU de imagen secundaria por contenido y tipo de dispositivo

Tipo de dispositivo	Contenido de audio	Contenido de anuncios de video
Chromecast
Chromecast con Google TV
Pantalla inteligente
Control remoto de la pantalla inteligente		Nota: La imagen secundaria no es compatible con los controles remotos del contenido de video.

Audio

Descripción general

La imagen secundaria para el contenido de audio está impulsada por 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 inteligente cuando esté configurada.

Nota: Recomendamos a los desarrolladores de Cast usar la IU de audio predeterminada que se proporciona a través del elemento <cast-media-player> del receptor web. El uso de la IU predeterminada proporciona una experiencia del usuario coherente en Chromecast, pantallas inteligentes y Chromecast con Google TV, con una sobrecarga mínima. La función de imagen secundaria no es compatible con apps que usan una IU personalizada. Esto no se aplica a los controles remotos, ya que siempre mostrarán la imagen secundaria cuando se configure.

Implementación

Para establecer, 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 establece 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;
    });

A fin de actualizar la imagen secundaria durante la reproducción, la aplicación debe usar PlayerManager para obtener el MediaInformation mediante una llamada a getMediaInformation. La aplicación debe modificar la metadata mediante la actualización de la propiedad secondaryImage al valor deseado. Por último, llamar a setMediaInformation con la información nueva actualizará la IU. Este método se puede usar para manejar cambios en los metadatos proporcionados a través de actualizaciones, como 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 anular la configuración de la imagen secundaria, configura 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 se quita mediante UiManager. La imagen secundaria se muestra con la superposición de controles de video.

Implementación

Para establecer la imagen secundaria, la aplicación debe obtener una instancia de UiManager y llamar a setSecondaryImage. Toma 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 esté 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 en 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.