Medien durchsuchen

Cast Media Browsing (CMB) ist eine Funktion, mit der Smart Display-Nutzer Ihren Audio- oder Videocontentkatalog entdecken und damit interagieren können. CMB optimiert den Webempfänger mit einem optimierten Surferlebnis, das speziell auf Smart Displays abgestimmt ist.

In CMB werden standardisierte Vorlagen definiert, die ein einheitliches Surferlebnis bieten, das den Konventionen der Smart Display-Benutzeroberfläche entspricht. Entwickler stellen Daten bereit, um diese standardisierten Vorlagen auszufüllen. Vorlagen unterstützen sowohl Audio- als auch Videoinhalte oder eine Kombination aus beidem.

Einstiegspunkte

Es gibt zwei Einstiegspunkte für CMB, über die Nutzer Inhalte durch Berührung oder Sprachsteuerung auswählen und auswählen können.

Suche im Player

Wische während der Wiedergabe nach oben, um aus einer Liste von Inhalten auszuwählen, die von der App bereitgestellt werden:

Video

Audio

Landingpage-Suche

Wenn ein Webempfänger mit dem Element cast-media-player auf Smart Displays läuft, wird CMB im IDLE-Status angezeigt.

Video und Audio

Inhalte werden dargestellt

Entwickler sind dafür verantwortlich, die Vorlage für jeden Einstiegspunkt mit Daten für jedes Inhaltselement zu füllen. Die Inhalte, die zum In-Player-Stöbern angezeigt werden, können sich von den Inhalten unterscheiden, die zum Ausfüllen der Landingpage-Suche verwendet werden.

Mit der Funktion „Im Player suchen“ kannst du Elemente anzeigen, die mit dem Inhalt oder einer Playlist zusammenhängen, die sich der Nutzer gerade ansieht. Live-TV-Anbieter können diesen Einstiegspunkt auch nutzen, um eine Liste von Kanälen für den einfachen Zugriff auszufüllen.

Mit der Funktion „Landingpage-Suche“ machen Sie auf neue Originalinhalte, aktuelle Inhalte oder auf Inhalte aufmerksam, die für Ihre Nutzer möglicherweise von Interesse sind.

Warnung: Zur Vermeidung von Leistungsproblemen ist eine maximale Anzahl von 30 Artikeln in Media Browsing zulässig.

Mediensuche aktivieren

Rufen Sie setBrowseContent auf, um eine Liste der Medieninhalte zum Surfen bereitzustellen:

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

Die Medienübersicht wird direkt nach Aufruf dieser Methode aktualisiert.

Höhe des Sicherheitsbereichs

Wenn CMB aktiviert ist, ändert sich die Höhe des sicheren Bereichs der Cast SDK-UI. Möglicherweise müssen Sie Ihre vorhandene Web Receiver-UI aktualisieren. Verwende getSafeAreaHeight, um die Höhe des sicheren Bereichs zu bestimmen.

// 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

Mediensuche entfernen

Wenn Sie die Benutzeroberfläche von Media Browsing entfernen möchten, verwenden Sie null mit setBrowseContent:

controls.setBrowseContent(null);

Mediensuche anpassen

Inhalte durchsuchen

Passen Sie mit BrowseContent den Titel der Media Browsing-UI an und aktualisieren Sie die Elemente:

A. BrowseContent.title

B. BrowseContent.items

Verwende BrowseItem, um Titel, Untertitel, Dauer und Bild für jedes Element in der Benutzeroberfläche von Media Browsing anzuzeigen:

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

Seitenverhältnis

Mit targetAspectRatio kannst du das beste Seitenverhältnis für deine Bild-Assets auswählen. Vom Web Receiver SDK werden drei Seitenverhältnisse unterstützt:

Seitenverhältnis	Beispiel
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

Nachrichten

Wenn ein Nutzer eines der Elemente aus der Media Browsing-UI auswählt, sendet das Web Receiver SDK eine LOAD-Nachricht an die Anwendung gemäß den Werten der ausgewählten BrowseItem.

Beispielcode

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