Sfoglia contenuti multimediali

Cast Media Browse (CMB) è una funzionalità che consente agli utenti di smart display scoprire e interagire con il tuo catalogo di contenuti audio o video. CMB lo fa tramite migliorare il ricevitore web con un'esperienza di navigazione semplificata che appositamente studiati per smart display.

CMB definisce modelli standardizzati che offrono un'esperienza di navigazione coerente che segue le convenzioni della UI per gli smart display. Gli sviluppatori forniscono i dati da compilare a questi modelli standardizzati. I modelli supportano contenuti audio e video o un mix di entrambi.

Entry point

Esistono due punti di ingresso per CMB, da cui un utente può sfogliare e selezionare usando il controllo vocale o touch.

Navigazione nel player

Scorri il dito verso l'alto durante la riproduzione per scegliere da un elenco di contenuti forniti dall'applicazione:

Video

Audio

Sfoglia pagine di destinazione

Quando un ricevitore web con l'elemento cast-media-player è in esecuzione su Smart Viene visualizzata la scheda CMB mentre è in stato INATTIVO.

Video e audio

Aggiunta di contenuti

Gli sviluppatori sono responsabili della compilazione del modello per ogni punto di ingresso con per ogni elemento di contenuto. I contenuti utilizzati per compilare la navigazione nel player possono essere diversi da quelli utilizzati per compilare la navigazione nelle pagine di destinazione.

Utilizza la funzione Navigazione nel player per visualizzare gli elementi correlati ai contenuti di un utente attualmente in riproduzione o gli elementi di una playlist. Anche i fornitori di TV in diretta potrebbero usare questo punto di accesso per compilare un elenco di canali e accedervi facilmente.

Utilizza la navigazione nelle pagine di destinazione per far conoscere i nuovi contenuti originali, quelli che attualmente pubblicati o contenuti che potrebbero interessare ulteriormente l'utente.

Abilita navigazione multimediale

Per fornire un elenco di contenuti multimediali che puoi consultare, chiama il numero setBrowseContent:

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

L'interfaccia utente di esplorazione dei contenuti multimediali viene aggiornata immediatamente dopo la chiamata di questo metodo.

Altezza area di sicurezza

Quando la CMB è attiva, l'altezza dell'area di sicurezza dell'interfaccia utente dell'SDK Cast cambia e potrebbe essere necessario aggiornare l'interfaccia utente esistente del ricevitore web. Utilizza le funzionalità di 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 esplorazione dei contenuti multimediali

Per rimuovere l'interfaccia utente di Sfoglia contenuti multimediali, utilizza null con setBrowseContent:

controls.setBrowseContent(null);

Personalizza la navigazione tra i contenuti multimediali

Sfogliare i contenuti

Utilizza le funzionalità di BrowseContent per personalizzare il titolo dell'interfaccia utente di Sfoglia contenuti multimediali e aggiornare gli elementi:

A. BrowseContent.title

B. BrowseContent.items

Utilizza le funzionalità di BrowseItem per visualizzare titolo, sottotitolo, durata e immagine per ogni elemento nella sezione Sfoglia UI:

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

Proporzioni

Utilizza targetAspectRatio per selezionare le proporzioni migliori per gli asset immagine. Tre proporzioni sono supportate dall'SDK Web receiver:

Proporzioni	Esempio
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

Messaggi

Quando un utente seleziona uno degli elementi dall'interfaccia utente di esplorazione dei contenuti multimediali, il ricevitore web L'SDK invia un messaggio LOAD all'applicazione in base a i valori dell'elemento BrowseItem selezionato.

Codice di esempio

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