Inteligentne ekrany to urządzenia z funkcją dotykową, która umożliwia aplikacjom internetowym odbiorniki obsługę funkcji sterowania dotykowego. Web odbiornik SDK to domyślny interfejs użytkownika z dodatkowymi opcjami dotyczącymi odtwarzacza.
Z tego przewodnika dowiesz się, jak zoptymalizować aplikację internetową jako odbiornik na inteligentnych ekranach i jak dostosować elementy sterujące odtwarzaczem.
Dostęp do elementów interfejsu
Dostęp do obiektu elementów interfejsu można uzyskać za pomocą tego kodu:
const controls = cast.framework.ui.Controls.getInstance();
Jeśli nie używasz elementu cast-media-player, musisz ustawić właściwość touchScreenOptimizedApp na true w obszarze UiConfig w sekcji CastReceiverOptions.
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
Domyślny interfejs wideo
Do każdego boksu są przypisywane domyślne przyciski sterowania na podstawie MetadataType i MediaStatus.supportedMediaCommands.
MetadataType.Movie, Type_metadatas.General
B. MovieMediaMetadata.subtitle lub GenericMediaMetadata.subtitle.
C. MovieMediaMetadata.title lub GenericMediaMetadata.title.
F. ControlsSlot.SLOT_SECONDARY_1
G. ControlsSlot.SLOT_PRIMARY_1
H. Odtwórz/wstrzymaj
I. ControlsSlot.SLOT_PRIMARY_2
J. ControlsSlot.SLOT_SECONDARY_2
Gdy wartość supportedMediaCommands równa się ALL_BASIC_MEDIA, domyślny układ sterowania jest wyświetlany poniżej:
Gdy wartość supportedMediaCommands jest równa ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, domyślny układ sterowania jest wyświetlany poniżej:
Gdy wartość supportedMediaCommands równa się PAUSE | QUEUE_PREV | QUEUE_NEXT, domyślny układ sterowania będzie wyglądał tak:
Gdy ścieżki audio są dostępne, przycisk z napisami będzie zawsze wyświetlany w miejscu SLOT_SECONDARY_1.
Aby po uruchomieniu kontekstu odbiornika dynamicznie zmieniać wartość supportedMediaCommands, możesz wywołać PlayerManager.setSupportedMediaCommands, aby zastąpić tę wartość. Nowe polecenie możesz też dodać za pomocą polecenia addSupportedMediaCommands lub usunąć istniejące polecenie za pomocą narzędzia removeSupportedMediaCommands.
Domyślny interfejs audio
Typ metadanych.MUSIC_TRACK
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist lub MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. ControlsSlot.SLOT_SECONDARY_1
I. ControlsSlot.SLOT_PRIMARY_1
J. Odtwórz/wstrzymaj
K. ControlsSlot.SLOT_PRIMARY_2
L. ControlsSlot.SLOT_SECONDARY_2
Gdy wartość supportedMediaCommands równa się ALL_BASIC_MEDIA, domyślny układ sterujący jest wyświetlany poniżej:
Gdy wartość supportedMediaCommands równa się ALL_BASIC_MEDIA |
QUEUE_PREV | QUEUE_NEXT, domyślny układ sterowania jest wyświetlany poniżej:
Aby po uruchomieniu kontekstu odbiornika internetowego dynamicznie zmieniać wartość supportedMediaCommands, możesz wywołać PlayerManager.setSupportedMediaCommands, aby zastąpić tę wartość. Nowe polecenia możesz też dodawać za pomocą polecenia addSupportedMediaCommands. Możesz też usuwać istniejące polecenia za pomocą narzędzia removeSupportedMediaCommands.
Dostosuj układ przycisku sterowania UI
Użycie układu niestandardowego w celu zmiany przycisków w interfejsie użytkownika.
const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();
Następnie możesz przypisać przyciski sterowania do 4 boksów, wywołując interfejs assignButton.
controls.assignButton(
cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
cast.framework.ui.ControlsButton.LIKE
)
controls.assignButton(
cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
cast.framework.ui.ControlsButton.DISLIKE
)
Układ niestandardowy będzie wyglądał tak:
Jeśli przypisany przycisk nie jest obsługiwany w MediaStatus.supportedMediaCommands, jest wyszarzony. Jeśli np. supportedMediaCommands to ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE, przycisk QUEUE_PREV jest wyłączony.
Aby po uruchomieniu kontekstu odbiornika internetowego dynamicznie zmieniać wartość supportedMediaCommands, możesz wywołać PlayerManager.setSupportedMediaCommands, aby zastąpić tę wartość. Nowe polecenia możesz też dodawać za pomocą polecenia addSupportedMediaCommands. Możesz też usuwać istniejące polecenia za pomocą narzędzia removeSupportedMediaCommands.
Obraz dodatkowy
Obraz dodatkowy zapewnia deweloperom Cast możliwość dodania do interfejsu użytkownika obrazu informacyjnego w przypadku aplikacji audio i wideo, na przykład do wyświetlania logo kanału lokalnego lub formatu multimedialnego. Ta nowa funkcja nie wymaga dużych nakładów pracy, a jednocześnie obsługuje spójny interfejs użytkownika na różnych platformach displayowych Cast: Chromecast, inteligentne ekrany i Chromecast z Google TV.