Smart Displays sind Geräte mit Touchfunktion, die Web Receiver-Anwendungen die Steuerung per Touchscreen ermöglichen. Das Web Receiver SDK bietet eine Standard-UI mit zusätzlichen Anpassungsmöglichkeiten für die Steuerelemente des Players.
In diesem Leitfaden wird erläutert, wie du deine Web Receiver App beim Start auf Smart Displays optimieren und die Player-Steuerelemente anpassen kannst.
Auf UI-Steuerelemente zugreifen
Auf das UI-Steuerelemente-Objekt kann mit dem folgenden Code zugegriffen werden:
const controls = cast.framework.ui.Controls.getInstance();
Wenn Sie kein cast-media-player
-Element verwenden, müssen Sie das Attribut touchScreenOptimizedApp
in UiConfig
unter CastReceiverOptions
auf true
setzen.
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
Standard-Video-UI
Standardschaltflächen sind auf Basis von MetadataType
und MediaStatus.supportedMediaCommands
jedem Slot zugewiesen.
MetadataType.Movie, MetadataType.Generic
B. MovieMediaMetadata.subtitle
oder GenericMediaMetadata.subtitle
.
C. MovieMediaMetadata.title
oder GenericMediaMetadata.title
.
F) ControlsSlot.SLOT_SECONDARY_1
G. ControlsSlot.SLOT_PRIMARY_1
H. Wiedergabe/Pause
I. ControlsSlot.SLOT_PRIMARY_2
J. ControlsSlot.SLOT_SECONDARY_2
Wenn der Wert von supportedMediaCommands
gleich ALL_BASIC_MEDIA
ist, wird das Standardkontrolllayout so angezeigt:
Wenn der Wert von supportedMediaCommands
gleich ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
ist, wird das Standardkontrolllayout so angezeigt:
Wenn der Wert von supportedMediaCommands
gleich PAUSE | QUEUE_PREV | QUEUE_NEXT
ist, wird das Standardsteuerungslayout so angezeigt:
Wenn Texttracks verfügbar sind, wird die Untertitelschaltfläche immer bei SLOT_SECONDARY_1
angezeigt.
Wenn Sie den Wert von supportedMediaCommands
nach dem Starten eines Empfängerkontexts dynamisch ändern möchten, können Sie PlayerManager.setSupportedMediaCommands
aufrufen, um den Wert zu überschreiben. Sie können auch einen neuen Befehl mit addSupportedMediaCommands
hinzufügen oder den vorhandenen Befehl mit removeSupportedMediaCommands
entfernen.
Standard-Audio-UI
Metadatentyp.MUSIC_TRACK
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
oder MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. ControlsSlot.SLOT_SECONDARY_1
I. ControlsSlot.SLOT_PRIMARY_1
J. Wiedergabe/Pause
K. ControlsSlot.SLOT_PRIMARY_2
L. ControlsSlot.SLOT_SECONDARY_2
Wenn der Wert von supportedMediaCommands
gleich ALL_BASIC_MEDIA
ist, wird das Standardsteuerelemente für die folgenden Elemente angezeigt:
Wenn der Wert von supportedMediaCommands
gleich ALL_BASIC_MEDIA |
QUEUE_PREV | QUEUE_NEXT
ist, wird das Standardsteuerungslayout so angezeigt:
Wenn Sie den Wert von supportedMediaCommands
nach dem Start eines Web Receivers-Kontexts dynamisch ändern möchten, können Sie PlayerManager.setSupportedMediaCommands
aufrufen, um den Wert zu überschreiben. Außerdem haben Sie die Möglichkeit, neue Befehle mit addSupportedMediaCommands
hinzuzufügen oder vorhandene Befehle mit removeSupportedMediaCommands
zu entfernen.
Layout der Schaltflächenschaltfläche auf der Benutzeroberfläche anpassen
Verwenden Sie ein benutzerdefiniertes Layout, wenn Sie Schaltflächen in UI-Steuerelementen ändern möchten.
const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();
Anschließend können Sie die Steuerungsschaltflächen 4 Slots zuweisen. Rufen Sie dazu assignButton
auf.
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
)
Das benutzerdefinierte Layout wird so angezeigt:
Wenn die zugewiesene Schaltfläche in MediaStatus.supportedMediaCommands
nicht unterstützt wird, ist die Schaltfläche ausgegraut. Wenn beispielsweise supportedMediaCommands
gleich ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE
ist, ist die Schaltfläche QUEUE_PREV
deaktiviert.
Wenn Sie den Wert von supportedMediaCommands
nach dem Start eines Web Receiver-Kontexts dynamisch ändern möchten, können Sie PlayerManager.setSupportedMediaCommands
aufrufen, um den Wert zu überschreiben. Außerdem können Sie mit addSupportedMediaCommands
neue Befehle hinzufügen oder mit removeSupportedMediaCommands
vorhandene Befehle entfernen.
Sekundäres Bild
Sekundäre Bilder bieten Cast-Entwicklern die Flexibilität, der Benutzeroberfläche ein Informationsbild für Audio- und Videoanwendungen hinzuzufügen, beispielsweise für lokale Kanallogos oder Medienformate. Diese neue Funktionalität wird mit geringem Overhead und einer einheitlichen Benutzeroberfläche auf verschiedenen Cast-Displayplattformen bereitgestellt: Chromecast, Smart Displays und Chromecast mit Google TV.