Les écrans connectés sont des appareils dotés de fonctionnalités tactiles qui permettent aux applications de récepteur Web d'accepter les commandes tactiles. Le SDK Récepteur Web fournit une interface utilisateur par défaut avec une personnalisation supplémentaire des commandes du lecteur.
Ce guide explique comment optimiser votre application Web Receiver lorsqu'elle est lancée sur des écrans connectés et comment personnaliser les commandes du lecteur.
Accéder aux commandes de l'interface utilisateur
L'objet UI Controls est accessible avec le code suivant:
const controls = cast.framework.ui.Controls.getInstance();
Si vous n'utilisez pas d'élément cast-media-player
, vous devez définir la propriété touchScreenOptimizedApp
sur true
dans UiConfig
sous CastReceiverOptions
.
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
UI vidéo par défaut
Des boutons de commande par défaut sont attribués à chaque emplacement en fonction de MetadataType
et MediaStatus.supportedMediaCommands
.
MetadataType.Movie, MetadataType.Generic
B. MovieMediaMetadata.subtitle
ou GenericMediaMetadata.subtitle
.
C. MovieMediaMetadata.title
ou GenericMediaMetadata.title
.
F. ControlsSlot.SLOT_SECONDARY_1
G. ControlsSlot.SLOT_PRIMARY_1
H. Lecture/Pause
I. ControlsSlot.SLOT_PRIMARY_2
J. ControlsSlot.SLOT_SECONDARY_2
Lorsque la valeur de supportedMediaCommands
est égale à ALL_BASIC_MEDIA
, la mise en page de contrôle par défaut s'affiche comme suit:
Lorsque la valeur de supportedMediaCommands
est égale à ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
, la mise en page de contrôle par défaut s'affiche comme suit:
Lorsque la valeur de supportedMediaCommands
est égale à PAUSE | QUEUE_PREV | QUEUE_NEXT
, la mise en page de contrôle par défaut s'affiche comme suit:
Lorsque des pistes de texte sont disponibles, le bouton des sous-titres s'affiche toujours sur SLOT_SECONDARY_1
.
Pour modifier de manière dynamique la valeur de supportedMediaCommands
après avoir démarré un contexte de destinataire, vous pouvez appeler PlayerManager.setSupportedMediaCommands
afin de remplacer la valeur. Vous pouvez également ajouter une commande en utilisant addSupportedMediaCommands
ou supprimer une commande existante en utilisant removeSupportedMediaCommands
.
UI audio par défaut
MetadataType.MUSIC_TRACK
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
ou MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. ControlsSlot.SLOT_SECONDARY_1
I. ControlsSlot.SLOT_PRIMARY_1
J. Lecture/Pause
K. ControlsSlot.SLOT_PRIMARY_2
L. ControlsSlot.SLOT_SECONDARY_2
Lorsque la valeur de supportedMediaCommands
est égale à ALL_BASIC_MEDIA
, la disposition des commandes par défaut se présente comme suit:
Lorsque la valeur de supportedMediaCommands
est égale à ALL_BASIC_MEDIA |
QUEUE_PREV | QUEUE_NEXT
, la disposition des commandes par défaut se présente comme suit:
Pour modifier de manière dynamique la valeur de supportedMediaCommands
après avoir démarré un contexte de récepteur Web, vous pouvez appeler PlayerManager.setSupportedMediaCommands
afin de remplacer la valeur. Vous pouvez également ajouter de nouvelles commandes à l'aide de addSupportedMediaCommands
ou supprimer des commandes existantes à l'aide de removeSupportedMediaCommands
.
Personnaliser la disposition du bouton de commande de l'interface utilisateur
Utiliser une mise en page personnalisée si vous souhaitez modifier les boutons dans les commandes de l'interface utilisateur
const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();
Vous pouvez ensuite attribuer des boutons de commande à quatre emplacements en appelant 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
)
La mise en page personnalisée s'affichera comme suit:
Lorsque le bouton attribué n'est pas compatible avec MediaStatus.supportedMediaCommands
, il est grisé. Par exemple, si supportedMediaCommands
correspond à ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE
, le bouton QUEUE_PREV
est désactivé.
Pour modifier de manière dynamique la valeur de supportedMediaCommands
après avoir démarré un contexte de récepteur Web, vous pouvez appeler PlayerManager.setSupportedMediaCommands
pour remplacer la valeur. Vous pouvez également ajouter de nouvelles commandes à l'aide de addSupportedMediaCommands
ou supprimer des commandes existantes à l'aide de removeSupportedMediaCommands
.
Image secondaire
L'image secondaire permet aux développeurs Cast d'ajouter une image d'information à l'interface utilisateur pour les applications audio et vidéo, par exemple pour afficher les logos des chaînes locales ou le format multimédia. Cette nouvelle fonctionnalité engendre très peu de frais tout en conservant une interface utilisateur cohérente sur les différentes plates-formes d'affichage Cast: Chromecast, les écrans connectés et Chromecast avec Google TV.