Obraz dodatkowy

Deweloperzy Cast mogą dodać do interfejsu informacyjny (dodatkowy) obraz informacyjny w przypadku aplikacji audio i wideo. Aby sprawdzić zgodność, wyświetl obsługiwane formaty obrazów.

Drugi obraz pojawia się w prawym górnym rogu wyświetlacza i może zawierać dodatkowe informacje o aktualnie odtwarzanym materiale, takie jak format treści, znak wywoławczy stacji radiowej czy ocena programu telewizyjnego. Obraz dodatkowy jest widoczny na ekranie, dopóki funkcja jest włączona dla bieżącej treści, a odtwarzacz jest nieaktywny.

Tabela 1 przedstawia wrażenia użytkownika, gdy ta funkcja jest włączona na odpowiednich typach urządzeń i elementach sterujących. Szczegóły implementacji i integracji nieco się różnią w przypadku aplikacji audio i wideo. Informacje o integracji tej funkcji z aplikacją Web pickups znajdziesz w sekcjach poniżej.

Tabela 1. Interfejs obrazu dodatkowego według zawartości i typu urządzenia

Typ urządzenia	Treść audio	Treść wideo
Chromecast
Chromecast z Google TV
Inteligentny ekran
Pilot do inteligentnego ekranu		Uwaga: obraz dodatkowy nie jest obsługiwany przez piloty do treści wideo.

Audio

Opis

Obraz dodatkowy do treści audio korzysta z metadanych wczytanych treści. Po wczytaniu elementu multimedialnego wszystkie kolejne zmiany właściwości secondaryImage metadanych są odzwierciedlane w interfejsie użytkownika.

Jeśli inteligentny ekran służy jako pilot do obsługi dźwięku, po ustawieniu tego ustawienia obraz dodatkowy również pojawi się w jego interfejsie.

Uwaga: zachęcamy programistów przesyłających do korzystania z domyślnego interfejsu audio, który jest dostarczany za pomocą elementu <cast-media-player> odbiornika internetowego. Domyślny interfejs użytkownika zapewnia spójną obsługę Chromecasta, inteligentnych ekranów oraz Chromecasta z Google TV przy minimalnym nakładzie pracy. Funkcja obrazu dodatkowego nie jest obsługiwana w przypadku aplikacji korzystających z niestandardowego interfejsu. Nie dotyczy to pilota, ponieważ zawsze jest on wyświetlany jako obraz dodatkowy.

Implementacja

Aby ustawić, usunąć lub zaktualizować obraz dodatkowy, musisz zmodyfikować właściwość secondaryImage elementu MusicTrackMediaMetadata. Właściwość pobiera obiekt Image z adresem URL opisującym miejsce hostowania obrazu dodatkowego.

W poniższym przykładzie obraz dodatkowy jest ustawiony w przechwycie load. Gdy odtwarzacz zakończy wczytywanie treści, wyświetli się obraz dodatkowy.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

Aby zaktualizować obraz dodatkowy podczas odtwarzania, aplikacja powinna użyć PlayerManager w celu uzyskania MediaInformation, wywołując getMediaInformation. Aplikacja powinna następnie zmodyfikować metadata, aktualizując właściwość secondaryImage do żądanej wartości. Wywołanie setMediaInformation z nowymi informacjami spowoduje zaktualizowanie interfejsu. Tej metody można używać do obsługi zmian w metadanych dostarczanych w ramach aktualizacji takich jak zdarzenia EMSG czy ID3 podczas odtwarzania.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

Aby cofnąć ustawienie obrazu dodatkowego, ustaw w obiekcie metadanych wartość secondaryImage na null.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

Wideo

Opis

W przypadku treści wideo obraz dodatkowy jest ustawiany i usuwany za pomocą parametru UiManager. Drugi obraz jest wyświetlany z nakładką elementów sterujących odtwarzaniem filmu.

Implementacja

Aby ustawić obraz dodatkowy, aplikacja musi pobrać instancję UiManager i wywołać setSecondaryImage. Przyjmuje on 2 parametry: SecondaryImagePosition i adres URL obrazu. Obraz dodatkowy można ustawić w dowolnym momencie, ale będzie on widoczny tylko wtedy, gdy użytkownik uruchomi nakładkę.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

Obraz pomocniczy można usunąć przez ustawienie adresu URL obrazu na null lub pustego ciągu znaków.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

Dalsze kroki

To już koniec funkcji, które możesz dodać do odbiornika internetowego. Możesz teraz utworzyć aplikację nadawcy na iOS, Androida lub w przeglądarce.