Media Browse

La fonctionnalité Cast Media Browse (CMB) permet aux utilisateurs connectés d'afficher et d'interagir avec votre catalogue de contenus audio ou vidéo. Pour ce faire, CMB améliore le confort de navigation dans le Web Receiver, spécialement conçu pour les écrans connectés.

CMB définit des modèles standardisés qui offrent une expérience de navigation cohérente selon les conventions de l'UI intelligente sur le Réseau Display. Les développeurs fournissent des données pour remplir ces modèles standardisés. Les modèles sont compatibles avec le contenu audio et vidéo, ou les deux.

Points d'entrée

L'utilisateur peut parcourir et sélectionner du contenu à l'aide de commandes tactiles ou vocales à deux niveaux du CMB.

Navigation dans le lecteur

Balayez l'écran vers le haut pendant la lecture pour sélectionner un contenu fourni par l'application:

Vidéo

Audio

Parcourir la page de destination

Lorsqu'un récepteur Web avec l'élément cast-media-player s'exécute sur des écrans connectés, il affiche l'état CMB lorsqu'il est à l'état IDLE.

Vidéo et audio

Ajout de contenu…

Les développeurs sont chargés de renseigner le modèle pour chaque point d'entrée avec les données de chaque élément de contenu. Le contenu utilisé pour la navigation dans le lecteur peut être différent de celui utilisé pour la navigation sur les pages de destination.

Utilisez la navigation dans le lecteur pour afficher des éléments en rapport avec le contenu en cours de lecture par un utilisateur ou des éléments d'une playlist. Les fournisseurs de services de télévision en direct peuvent également utiliser ce point d'entrée pour renseigner une liste de chaînes et y accéder facilement.

Utilisez la fonctionnalité de navigation de la page de destination pour améliorer la notoriété de votre contenu, de son contenu actuellement en ligne ou de ceux qui pourraient intéresser davantage votre utilisateur.

Avertissement : Pour éviter les problèmes de performances, le nombre maximal d'éléments Media Browse est de 30.

Activer la navigation multimédia

Fournissez une liste de contenus multimédias à parcourir en appelant setBrowseContent:

const controls = cast.framework.ui.Controls.getInstance();
controls.setBrowseContent(BrowseContent);

L'interface utilisateur de navigation multimédia est mise à jour immédiatement après l'appel de cette méthode.

Hauteur de la zone sûre

Lorsque CMB est activé, la hauteur de la zone sûre de l'interface utilisateur du SDK Cast change. Vous devrez peut-être mettre à jour l'interface utilisateur existante de votre récepteur Web. Utilisez getSafeAreaHeight pour déterminer la hauteur de la zone sûre.

// Media Browse UI enabled
controls.setBrowseContent(BrowseContent);
console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub

// Media Browse UI disabled
controls.setBrowseContent(null);
console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub

Supprimer la navigation multimédia

Pour supprimer l'interface utilisateur de navigation multimédia, utilisez null avec setBrowseContent :

controls.setBrowseContent(null);

Personnaliser la navigation multimédia

Parcourir du contenu

Utilisez BrowseContent pour personnaliser le titre de l'interface utilisateur de Media Browse et mettre à jour les éléments:

A. BrowseContent.title

B. BrowseContent.items

Utilisez BrowseItem pour afficher le titre, le sous-titre, la durée et l'image de chaque élément dans l'interface utilisateur de Media Browse:

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

Proportions

Utilisez targetAspectRatio pour sélectionner le meilleur format pour vos éléments image. Trois formats sont compatibles avec le SDK Web Receiver:

Format	Exemple
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

Messages

Lorsqu'un utilisateur sélectionne l'un des éléments de l'interface utilisateur de Media Browse, le SDK Web Receiver envoie un message LOAD à l'application en fonction des valeurs du BrowseItem sélectionné.

Exemple de code

const controls = cast.framework.ui.Controls.getInstance();

const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';

const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';

const items = [item1, item2];

const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    // Media browse
    controls.setBrowseContent(browseContent);
  });

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD, loadRequestData => {
    if (loadRequestData.media && loadRequestData.media.entity) {
      // Load by entity
      loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
      loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
    }
    return loadRequestData;
  });