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.
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:
Verwende BrowseItem
, um Titel, Untertitel, Dauer und Bild für jedes Element in der Benutzeroberfläche von Media Browsing anzuzeigen:
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;
});