Image secondaire

Les développeurs Cast peuvent ajouter une image informative (secondaire) à l'interface utilisateur pour les applications audio et vidéo. Consultez les formats d'image acceptés pour la compatibilité.

L'image secondaire apparaît en haut à droite de l'écran et peut être utilisée pour afficher un graphique contenant des informations supplémentaires sur le contenu en cours de lecture, telles que le format du contenu, l'indicatif de la station de radio ou la note de l'émission télévisée. L'image secondaire reste à l'écran tant que la fonctionnalité est activée pour le contenu actuel et que le lecteur n'est pas inactif.

Le Tableau 1 montre l'expérience utilisateur lorsque la fonctionnalité est activée sur les types et commandes d'appareil 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 Web Receiver.

Tableau 1: UI des images secondaires par contenu et type d'appareil

Type d'appareil	Contenu audio	Contenu vidéo
Chromecast
Chromecast avec Google TV
Écran connecté
Télécommande pour écran connecté		Remarque: L'image secondaire n'est pas compatible avec la télécommande pour le contenu vidéo.

Audio

Présentation

L'image secondaire du contenu audio est basée sur 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 répercutée dans l'interface utilisateur.

Si un écran connecté est utilisé comme télécommande pour l'audio, l'image secondaire s'affichera également sur l'UI de l'écran connecté une fois définie.

Remarque :Nous encourageons les développeurs Cast à utiliser l'interface utilisateur audio par défaut fournie via l'élément <cast-media-player> du récepteur Web. L'interface utilisateur par défaut offre une expérience utilisateur cohérente sur Chromecast, les écrans connectés et Chromecast avec Google TV, avec des frais généraux minimes. La fonctionnalité d'image secondaire n'est pas compatible avec les applications utilisant une UI personnalisée. Cela ne s'applique pas aux télécommandes, car elles afficheront toujours l'image secondaire une fois 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 contenant l'URL décrivant l'emplacement de l'image secondaire.

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

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 lors de la lecture, l'application doit utiliser PlayerManager afin d'obtenir MediaInformation en appelant getMediaInformation. L'application doit ensuite modifier metadata en mettant à jour la propriété secondaryImage avec la valeur souhaitée. Enfin, l'appel de setMediaInformation avec les nouvelles informations mettra à jour l'UI. Cette méthode permet de gérer les modifications apportées aux métadonnées fournies via des 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" sur 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 s'affiche 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 utilise deux paramètres: SecondaryImagePosition et l'URL de l'image. L'image secondaire peut être définie à tout moment. Toutefois, elle ne s'affiche que lorsqu'un utilisateur déclenche le passage 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

Vous trouverez ci-dessous la liste des fonctionnalités que vous pouvez ajouter à Web Receiver. Vous pouvez à présent créer une application d'envoi sur iOS, Android ou le Web.