Image secondaire

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

L'image secondaire s'affiche en haut à droite de l'écran et peut être utilisée pour afficher une illustration 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 contenu actuel et que le lecteur n'est pas inactif.

Le Tableau 1 illustre l'expérience utilisateur lorsque la fonctionnalité est activée sur les types d'appareils et les commandes applicables. Détails de l'implémentation et l'intégration diffèrent légèrement entre les applications audio et vidéo. Voir les sections ci-dessous pour intégrer cette fonctionnalité à votre application Web Receiver.

<ph type="x-smartling-placeholder">

</ph> Tableau 1: Image d'interface utilisateur secondaire 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 écrans connectés		Remarque: Les images secondaires ne sont pas compatibles avec les télécommandes pour le contenu vidéo.

Audio

Présentation

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

Si un écran connecté est utilisé comme télécommande pour l'audio, l'image secondaire apparaît également sur l'UI de l'écran connecté lorsqu'il est défini.

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. Utiliser l'interface utilisateur par défaut offre une expérience utilisateur cohérente sur Chromecast, les écrans connectés et Chromecast avec Google TV, à moindre coût La caractéristique d'image secondaire est non compatible avec les applications utilisant une interface utilisateur personnalisée. Cela ne s'applique pas aux télécommandes car ils afficheront toujours l'image secondaire lorsqu'elle sera définie.

Implémentation

Pour définir, supprimer ou mettre à jour l'image secondaire, secondaryImage la propriété de MusicTrackMediaMetadata doit être modifiée. La propriété prend un 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. Quand ? le lecteur termine le chargement du contenu, 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 pendant la lecture, l'application doit utiliser PlayerManager pour obtenir le MediaInformation en appelant getMediaInformation L'application doit ensuite modifier metadata en mettant à jour le secondaryImage sur la valeur souhaitée. Enfin, Appel en cours : setMediaInformation avec les nouvelles informations mettra à jour l'UI. Cette méthode permet de gérer Modifications des 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" au niveau de .

// 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 la superposition des commandes vidéo.

Implémentation

Pour définir l'image secondaire, l'application doit obtenir une instance de UiManager. et appelez setSecondaryImage Elle nécessite deux paramètres : SecondaryImagePosition et son URL. Vous pouvez définir l'image secondaire à tout moment, mais ne s'affichent que lorsqu'un utilisateur déclenche l'affichage de la superposition au premier plan.

/**
 * 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 son URL sur null ou une 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 êtes arrivé à la fin des fonctionnalités que vous pouvez ajouter à votre récepteur Web. Vous pouvez maintenant créer une application émettrice sur iOS ; Android ou Web.