Cast Media Przeglądaj (CMB) to funkcja, która pozwala użytkownikom korzystającym z inteligentnych reklam displayowych na znajdowanie katalogu audio i wideo oraz korzystanie z niego. W tym celu ulepszamy odbiornik internetowy, który upraszcza przeglądanie treści i dostosowuje się do inteligentnych ekranów.
CMB definiuje standardowe szablony, które zapewniają spójne przeglądanie w sposób zgodny z konwencją inteligentnego ekranu. Programiści dostarczają dane, aby wypełnić te standardowe szablony. Szablony obsługują zarówno dźwięk, jak i treści wideo albo ich połączenie.
Punkty wejścia
W CMB istnieją 2 punkty wejścia. Użytkownik może przeglądać i wybierać treści za pomocą sterowania dotykowego lub głosowego.
Przeglądanie w odtwarzaczu
Podczas odtwarzania przesuń palcem w górę, aby wybrać pozycję z listy treści dostarczanych przez aplikację:
Wideo
Dźwięk
Przeglądanie stron docelowych
Gdy odbiornik internetowy z elementem cast-media-player
działa na inteligentnych ekranach, pokazuje stan CMB w stanie bezczynności.
Wideo i audio
Dodaję zawartość
Za wypełnianie szablonu w każdym punkcie wejścia danych odpowiadają dane poszczególnych elementów treści. Treści używane w funkcji przeglądania w odtwarzaczu mogą różnić się od tych używanych do przeglądania strony docelowej.
Za pomocą funkcji przeglądania w odtwarzaczu możesz wyświetlić elementy powiązane z treścią aktualnie odtwarzaną przez użytkownika lub elementami playlisty. Dostawcy telewizji na żywo mogą też wykorzystać ten punkt wejścia, aby wypełnić listę kanałów.
Za pomocą funkcji przeglądania strony docelowej możesz informować użytkowników o nowych, opublikowanych obecnie treściach lub treściach, które mogą zainteresować użytkownika.
Włącz przeglądanie multimediów
Aby przekazać listę treści multimedialnych do przeglądania, wywołaj funkcję setBrowseContent
:
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
Interfejs przeglądania internetu jest aktualizowany natychmiast po wywołaniu tej metody.
Wysokość bezpiecznego obszaru
Po włączeniu CMB wysokość w bezpiecznym obszarze interfejsu przesyłania pakietu SDK ulegnie zmianie. Może być konieczne zaktualizowanie istniejącego interfejsu Web odbiornika. Aby określić wysokość bezpiecznej strefy, użyj wartości getSafeAreaHeight
.
// 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
Usuń przeglądanie multimediów
Aby usunąć interfejs przeglądania, użyj metody null
w tagu setBrowseContent
:
controls.setBrowseContent(null);
Dostosuj przeglądanie multimediów
Przeglądanie treści
Aby dostosować tytuł interfejsu przeglądania multimediów i zaktualizować elementy, użyj narzędzia BrowseContent
:
BrowseItem
umożliwia wyświetlanie tytułu, podtytułu, czasu trwania i obrazu każdego elementu w interfejsie przeglądania multimediów:
Współczynnik proporcji
Użyj formatu targetAspectRatio
, aby wybrać najlepszy współczynnik proporcji zasobów graficznych. Web odbiornik SDK obsługuje trzy współczynniki proporcji:
Współczynnik proporcji | Przykład |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
Wiadomości
Gdy użytkownik wybierze jeden z elementów w interfejsie przeglądania multimediów, pakiet SDK odbiornika internetowego wyśle do aplikacji wiadomość LOAD
zgodnie z wartościami wybranego elementu BrowseItem
.
Przykładowy kod
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;
});