Image secondaire

Les développeurs Cast peuvent ajouter une image d'information (secondaire) à l'interface utilisateur pour les applications audio et vidéo. Affichez les formats d'image acceptés pour des raisons de compatibilité.

L'image secondaire s'affiche en haut à droite de l'écran. Vous pouvez l'utiliser pour afficher une image contenant des informations supplémentaires sur le contenu en cours de lecture, comme le format du contenu, l'indicatif de la station de radio ou la classification de l'émission télévisée. L'image secondaire reste affichée à l'écran tant que la fonctionnalité est activée pour le contenu actif et que le lecteur n'est pas inactif.

Le tableau 1 affiche l'expérience d'un utilisateur lorsque cette fonctionnalité est activée sur les types d'appareils et les commandes applicables. Les détails de l'implémentation et de l'intégration diffèrent légèrement entre les applications audio et vidéo. Consultez les sections ci-dessous pour intégrer cette fonctionnalité à votre application Récepteur Web.

Tableau 1: Interface utilisateur des images secondaires par contenu et type d'appareil
Type d'appareil Contenu audio Contenu vidéo
Chromecast Image secondaire sur les dongles Chromecast pour le contenu audio. Image secondaire sur les dongles Chromecast pour le contenu vidéo.
Chromecast avec Google TV Image secondaire sur Chromecast avec dongles Google TV pour le contenu audio. Image secondaire sur Chromecast avec des dongles Google TV pour le contenu vidéo.
Écran connecté Image secondaire sur les écrans connectés pour le contenu audio. Image secondaire sur les écrans connectés pour le contenu vidéo.
Télécommande pour écran connecté Image secondaire sur les télécommandes de l'écran connecté pour le contenu audio. Remarque: Vous ne pouvez pas utiliser d'image secondaire sur les télécommandes pour le contenu vidéo.

Son

Présentation

L'image secondaire du contenu audio est déterminée par les métadonnées du contenu chargé. Une fois l'élément multimédia chargé, toute modification ultérieure de la propriété secondaryImage des métadonnées est reflétée dans l'interface utilisateur.

Si un écran connecté est utilisé comme télécommande pour l'audio, l'image secondaire s'affiche également dans l'interface utilisateur de l'écran connecté lorsqu'elle est définie.

Implémentation

Pour définir, supprimer ou mettre à jour l'image secondaire, vous devez modifier la propriété secondaryImage de MusicTrackMediaMetadata. La propriété utilise un objet Image renseigné avec l'URL décrivant l'emplacement où l'image secondaire est hébergée.

Dans l'exemple ci-dessous, l'image secondaire est définie dans l'intercepteur load. Une fois le contenu chargé, le lecteur affiche l'image secondaire.

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

Pour mettre à jour l'image secondaire pendant la lecture, l'application doit utiliser PlayerManager pour obtenir MediaInformation en appelant getMediaInformation. L'application doit ensuite modifier metadata en mettant à jour la propriété secondaryImage sur la valeur souhaitée. Enfin, appelez setMediaInformation avec les nouvelles informations pour mettre à jour l'interface utilisateur. Cette méthode peut être utilisée pour gérer les modifications apportées aux métadonnées fournies par les mises à jour telles que les événements EMSG ou ID3 pendant la lecture.

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

Pour annuler la définition de l'image secondaire, définissez la propriété secondaryImage sur "null" dans l'objet de métadonnées.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

Vidéo

Présentation

Pour le contenu vidéo, l'image secondaire est définie et supprimée à l'aide de UiManager. L'image secondaire est affichée avec les commandes vidéo en superposition.

Implémentation

Pour définir l'image secondaire, l'application doit obtenir une instance de UiManager et appeler setSecondaryImage. Elle comporte deux paramètres: SecondaryImagePosition et l'URL de l'image. La définition de l'image secondaire peut être effectuée à tout moment, mais ne s'affiche que lorsqu'un utilisateur déclenche l'affichage au premier plan de la superposition.

/**
 * 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');

Pour supprimer l'image secondaire, définissez l'URL de l'image sur null ou une chaîne vide.

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

Étapes suivantes

Voilà qui conclut ce que vous pouvez ajouter à votre récepteur Web. Vous pouvez désormais créer une application émettrice sur iOS, Android ou Web.