Sfoglia contenuti multimediali

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

Voce Sfoglia contenuti multimediali - Video del giocatore 1 Voce Sfoglia contenuti multimediali - Video player 2

Audio

Voce Sfoglia contenuti multimediali - Audio del player 1 Voce Sfoglia contenuti multimediali - Audio del player 2

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

Voce Sfoglia contenuti multimediali - Video della pagina di destinazione Voce Sfoglia contenuti multimediali - Audio della pagina di destinazione

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:

Sfoglia i contenuti multimediali - Sfoglia i contenuti

A. BrowseContent.title

B. BrowseContent.items

Utilizza BrowseItem per visualizzare titolo, sottotitolo, durata e immagine per ogni elemento nell'interfaccia utente di Sfoglia i contenuti multimediali:

Sfoglia i contenuti multimediali - Sfoglia elemento

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

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 Sfoglia contenuti multimediali - Proporzioni quadrate
PORTRAIT_2_TO_3 Sfoglia contenuti multimediali - Proporzioni verticali
LANDSCAPE_16_TO_9 Sfoglia contenuti multimediali - Proporzioni orizzontali

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