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.