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