Für Smart Displays optimieren

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

A. --playback-logo-image

B. MovieMediaMetadata.subtitle oder GenericMediaMetadata.subtitle.

C. MovieMediaMetadata.title oder GenericMediaMetadata.title.

D) MediaStatus.currentTime

E. MediaInformation.duration

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

A. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist oder MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F) MediaStatus.currentTime

G. MediaInformation.duration

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.