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