Cast Media Explore (CMB) è una funzionalità che consente agli utenti di smart display di trovare il tuo catalogo di contenuti audio o video e di interagire con questi ultimi. A tal fine, CMB migliora il ricevitore del Web grazie a un'esperienza di navigazione semplificata, appositamente ottimizzata per gli smart display.
CMB definisce modelli standardizzati che offrono un'esperienza di navigazione coerente che segue le convenzioni dell'interfaccia utente di smart display. Gli sviluppatori forniscono i dati per completare questi modelli standardizzati. I modelli supportano contenuti audio e video o una combinazione di entrambi.
Punti di contatto
Esistono due punti di ingresso per CMB, da cui un utente può sfogliare e selezionare contenuti utilizzando il controllo vocale o touch.
Navigazione nel player
Scorri verso l'alto durante la riproduzione per scegliere da un elenco di contenuti forniti dall'applicazione:
Video
Audio
Sfogliare la pagina di destinazione
Quando un ricevitore web con l'elemento cast-media-player
è in esecuzione sugli smart display, mostra CMB quando è in stato INATTIVO.
Video e audio
Aggiunta di contenuti
Gli sviluppatori sono responsabili di completare il modello per ogni punto di ingresso con i dati per ogni elemento di contenuti. I contenuti utilizzati per completare la navigazione nel player possono essere diversi da quelli utilizzati per completare la navigazione nella pagina di destinazione.
Utilizza la navigazione nel player per visualizzare elementi correlati ai contenuti attualmente riprodotti da un utente o elementi di una playlist. I fornitori di TV in diretta potrebbero utilizzare questo punto di accesso anche per completare un elenco di canali per un facile accesso.
Utilizza la pagina di destinazione per far conoscere i nuovi contenuti originali, quelli attualmente pubblicati o quelli che potrebbero interessare di più al tuo utente.
Attiva navigazione multimediale
Fornisci un elenco di contenuti multimediali per la navigazione chiamando setBrowseContent
:
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
L'interfaccia utente di Sfoglia i contenuti multimediali viene aggiornata subito dopo aver chiamato questo metodo.
Altezza area sicura
Se viene attivato CMB, l'altezza dell'area sicura dell'interfaccia utente dell'SDK Cast cambia e potresti dover aggiornare l'UI esistente del ricevitore web. Usa getSafeAreaHeight
per determinare l'altezza dell'area sicura.
// 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
Rimuovi navigazione multimediale
Per rimuovere l'interfaccia utente di Sfoglia i contenuti multimediali, utilizza null
con setBrowseContent
:
controls.setBrowseContent(null);
Personalizzare la navigazione multimediale
Sfogliare i contenuti
Utilizza BrowseContent
per personalizzare il titolo dell'interfaccia utente di Sfoglia i contenuti multimediali e aggiornare gli elementi:
Utilizza BrowseItem
per visualizzare titolo, sottotitolo, durata e immagine per ogni elemento nell'interfaccia utente di Sfoglia i contenuti multimediali:
Proporzioni
Utilizza targetAspectRatio
per selezionare le proporzioni migliori per i tuoi asset immagine. L'SDK Ricevitore web supporta tre proporzioni:
Proporzioni | Esempio |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
Messaggi
Quando un utente seleziona uno degli elementi nell'interfaccia utente della navigazione multimediale, l'SDK del ricevitore web
invia un messaggio LOAD
all'applicazione in base ai
valori dell'elemento BrowseItem
selezionato.
Codice campione
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;
});