Le SDK Web Receiver fournit une UI de lecteur intégrée. Pour implémenter cette UI dans votre application Web receiver personnalisée, vous devez ajouter l'élément cast-media-player au corps de votre fichier HTML.
<body>
<cast-media-player></cast-media-player>
</body>
Les variables CSS vous permettent de personnaliser diverses propriétés cast-media-player, y compris l'arrière-plan du lecteur, l'image de démarrage, la famille de polices, etc. Vous pouvez ajouter ces variables à l'aide de styles CSS intégrés, d'une feuille de style CSS ou du style.setProperty en JavaScript.
Dans les sections suivantes, découvrez comment personnaliser chaque zone de l'élément du lecteur multimédia. Pour vous aider à démarrer, vous pouvez utiliser les modèles suivants.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/receiver.css" media="screen" /> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> </body> <footer> <script src="js/receiver.js"></script> </footer> </html>
js/receiver.js
const context = cast.framework.CastReceiverContext.getInstance();
...
// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');
...
context.start();
css/receiver.css
body {
--playback-logo-image: url('http://some/image.png');
}
cast-media-player {
--theme-hue: 100;
--progress-color: rgb(0, 255, 0);
--splash-image: url('http://some/image.png');
--splash-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<style>
body {
--playback-logo-image: url('http://some/image.png');
}
cast-media-player {
--theme-hue: 100;
--progress-color: rgb(0, 255, 0);
--splash-image: url('http://some/image.png');
}
</style>
<script>
const context = cast.framework.CastReceiverContext.getInstance();
...
// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');
...
context.start();
</script>
</body>
</html>
Logo Playback
Le logo de lecture s'affiche en haut à gauche du récepteur pendant la lecture des contenus multimédias. Cette propriété est distincte de la classe .logo. Vous pouvez personnaliser --playback-logo-image à partir du sélecteur body.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Propriétés d'arrière-plan du lecteur
Les variables --background définissent les propriétés d'arrière-plan de l'ensemble du lecteur, visibles lors du lancement et de la lecture. Par exemple, vous pouvez définir l'intégralité de l'arrière-plan sur un dégradé linéaire blanc et argenté:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Écran du récepteur Web:
Vous pouvez utiliser les variables suivantes pour personnaliser les propriétés .background:
Variables et valeurs par défaut
| Nom | Valeur par défaut | Description |
|---|---|---|
| -- arrière-plan | Noir | Propriété d'arrière-plan CSS |
| --background-color | Propriété CSS background-color | |
| --background-image | Propriété CSS de l'image de fond | |
| --background-repeat | pas de répétition | Propriété CSS background-repeat |
| --background-size | reprise | Propriété CSS de taille d'arrière-plan |
Modèle CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Propriétés du logo
La classe .logo est placée devant la classe .background et s'étend sur l'ensemble du lecteur. Cette classe s'affiche lors du lancement du récepteur. Si vous ne fournissez aucune variable .splash, la classe .logo s'affiche également lorsque votre récepteur est inactif.
L'exemple suivant définit --logo-image sur une icône d'égaliseur nommée welcome.png. Une image est affichée par défaut au centre de votre récepteur:
cast-media-player {
--logo-image: url('welcome.png');
}
Écran du récepteur Web:
Vous pouvez utiliser les variables suivantes pour personnaliser les propriétés .logo:
Variables et valeurs par défaut
| Nom | Valeur par défaut | Description |
|---|---|---|
| --logo-background | Propriété d'arrière-plan CSS | |
| --logo-color | Propriété CSS background-color | |
| --logo-image | Propriété CSS de l'image de fond | |
| --logo-repeat | pas de répétition | Propriété CSS background-repeat |
| --logo-size | Propriété CSS de taille d'arrière-plan |
Modèle CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Propriétés de la bulle de texte
Comme la classe .logo, la classe .splash couvre l'ensemble du lecteur. Si vous définissez ces propriétés, vos variables .splash remplacent les variables .logo lorsque votre récepteur est inactif. Cela signifie que vous pouvez utiliser un ensemble de propriétés .logo au lancement, et afficher des arrière-plans ou des images distincts lorsque le récepteur est inactif.
Par exemple, vous pouvez remplacer l'arrière-plan en dégradé blanc et argenté par dimgray et ajouter une icône waiting... animée:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Écran du récepteur Web:
Si vous ne définissez pas ces propriétés, votre récepteur utilise par défaut vos paramètres .logo ou le nom de votre application lorsqu'il est inactif.
Vous pouvez utiliser les variables suivantes pour personnaliser les propriétés .splash:
Variables et valeurs par défaut
| Nom | Valeur par défaut | Description |
|---|---|---|
| --splash-background | Propriété d'arrière-plan CSS | |
| --splash-color | Propriété CSS background-color | |
| --splash-image | Propriété CSS de l'image de fond | |
| --splash-repeat | Propriété CSS background-repeat | |
| --splash-size | Propriété CSS de taille d'arrière-plan |
Modèle CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Diaporama
Pour faire défiler jusqu'à 10 images pendant l'état inactif (à la place de l'image de démarrage), utilisez les paramètres de diaporama suivants.
Variables et valeurs par défaut
| Nom | Valeur par défaut | Description |
|---|---|---|
| --slideshow-interval-duration | 10 s | Délai entre les images. |
| --slideshow-animation-duration | 2s | Durée de la transition. |
| --slideshow-image-1 | Première image du diaporama. | |
| --slideshow-image-2 | Deuxième image du diaporama. | |
| --slideshow-image-3 | Troisième image du diaporama. | |
| --slideshow-image-4 | Quatrième image du diaporama. | |
| --slideshow-image-5 | Cinquième image du diaporama. | |
| --slideshow-image-6 | Sixième image du diaporama. | |
| --slideshow-image-7 | Septième image du diaporama. | |
| --slideshow-image-8 | Huitième image du diaporama. | |
| --slideshow-image-9 | Neuvième image du diaporama. | |
| --slideshow-image-10 | Dixième image du diaporama. |
Modèle CSS
cast-media-player {
--slideshow-interval-duration:
--slideshow-animation-duration:
--slideshow-image-1:
--slideshow-image-2:
--slideshow-image-3:
--slideshow-image-4:
--slideshow-image-5:
--slideshow-image-6:
--slideshow-image-7:
--slideshow-image-8:
--slideshow-image-9:
--slideshow-image-10:
}
Propriétés du filigrane
Un .watermark s'affiche pendant la lecture d'un contenu multimédia. Il s'agit généralement d'une petite image transparente qui se trouve par défaut en bas à droite de votre récepteur.
Vous pouvez utiliser les variables suivantes pour personnaliser les propriétés .watermark:
Variables et valeurs par défaut
| Nom | Valeur par défaut | Description |
|---|---|---|
| --watermark-background | Propriété d'arrière-plan CSS | |
| --watermark-color | Propriété CSS background-color | |
| --watermark-image | Propriété CSS de l'image de fond | |
| --watermark-position | en bas à droite | Propriété CSS de la position d'arrière-plan |
| --watermark-repeat | pas de répétition | Propriété CSS background-repeat |
| --watermark-size | Propriété CSS de taille d'arrière-plan |
Modèle CSS
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Lecture, annonces et autres propriétés CSS
Vous pouvez également personnaliser les annonces, les polices, les images de lecteur et d'autres propriétés à l'aide du sélecteur cast-media-player.
Variables et valeurs par défaut
| Nom | Valeur par défaut | Description |
|---|---|---|
| --ad-title | Annonce | Titre de l'annonce. |
| --skip-ad-title | Ignorer l'annonce | Texte de la zone de texte Ignorer l'annonce. |
| --break-color | hsl(teinte, 100%, 50%) | Couleur de la coupure publicitaire. |
| --font-family | Open Sans | Famille de polices pour les métadonnées et la barre de progression. |
| --spinner-image | Image par défaut | Image à afficher lors du lancement. |
| --buffering-image | Image par défaut | Image à afficher pendant la mise en mémoire tampon. |
| --pause-image | Image par défaut | Image à afficher lorsque la lecture est en pause. |
| --play-image | Image à afficher dans les métadonnées lors de la lecture. | |
| --theme-hue | 42 | La teinte à utiliser pour le lecteur. |
| --progress-color | hsl(teinte, 95%, 60%) | Couleur de la barre de progression. |
Modèle CSS
cast-media-player {
--ad-title:
--skip-ad-title:
--break-color:
--font-family:
--spinner-image:
--buffering-image:
--pause-image:
--play-image:
--theme-hue:
--progress-color:
}
Pour en savoir plus et obtenir des illustrations supplémentaires, consultez la section Récepteur multimédia stylisé.
Calibrage
Les mises en page pour la télévision présentent des exigences uniques en raison de l'évolution des normes TV et de la volonté de toujours présenter une image en plein écran aux spectateurs. Les appareils TV peuvent rogner le bord extérieur de la mise en page d'une application afin de s'assurer que l'intégralité de l'écran est remplie. Ce comportement est généralement désigné par le terme de surbalayage. Pour éviter que les éléments de l'écran ne soient tronqués en raison d'un surbalayage, incorporez une marge de 10 % sur tous les côtés de votre mise en page.
UI audio par défaut
MetadataType.MUSIC_TRACK
A. --logo-image
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist ou MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. Lecture/Pause
Liaison de données de l'UI personnalisée
Le SDK Cast Web Receiver accepte l'utilisation de votre propre élément d'interface utilisateur personnalisé à la place de cast-media-player.
La liaison de données d'UI personnalisée vous permet d'utiliser votre propre élément d'UI personnalisé et d'utiliser la classe PlayerDataBinder pour lier l'UI à l'état du lecteur au lieu d'ajouter l'élément cast-media-player à votre récepteur. Le binder accepte également l'envoi d'événements pour les modifications de données, si l'application n'est pas compatible avec la liaison de données.
const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();
const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
// Update ui according to player state
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
e => {
switch (e.value) {
case cast.framework.ui.State.LAUNCHING:
case cast.framework.ui.State.IDLE:
// Write your own event handling code
break;
case cast.framework.ui.State.LOADING:
// Write your own event handling code
break;
case cast.framework.ui.State.BUFFERING:
// Write your own event handling code
break;
case cast.framework.ui.State.PAUSED:
// Write your own event handling code
break;
case cast.framework.ui.State.PLAYING:
// Write your own event handling code
break;
}
});
context.start();
Vous devez ajouter au moins un élément MediaElement au code HTML pour que le récepteur Web puisse l'utiliser. Si plusieurs objets MediaElement sont disponibles, vous devez ajouter un tag au MediaElement que le récepteur Web doit utiliser. Pour ce faire, ajoutez castMediaElement à la liste de classes de la vidéo, comme indiqué ci-dessous. Sinon, le récepteur Web choisira le premier MediaElement.
<video class="castMediaElement"></video>