Przeglądanie multimediów

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.

Uwaga: aby zapobiec problemom z wydajnością, maksymalna liczba elementów w przeglądarce multimediów wynosi 30 elementów.

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:

A. BrowseContent.title

B. BrowseContent.items

BrowseItem umożliwia wyświetlanie tytułu, podtytułu, czasu trwania i obrazu każdego elementu w interfejsie przeglądania multimediów:

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

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