Le SDK Web Receiver fournit une interface utilisateur de lecteur intégrée. Pour implémenter cette interface utilisateur 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 différentes 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 avec des styles CSS intégrés, une feuille de style CSS ou style.setProperty en JavaScript.
Dans les sections suivantes, découvrez comment personnaliser chaque zone de l'élément du lecteur multimédia. Vous pouvez utiliser les modèles suivants pour vous lancer.
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 de lecture
Le logo de lecture s'affiche en haut à gauche de votre récepteur pendant la lecture du contenu multimédia. 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 un dégradé linéaire blanc et argenté pour l'ensemble de l'arrière-plan :
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Affichage Web Receiver :
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 |
|---|---|---|
| --background | noir | Propriété d'arrière-plan CSS |
| --background-color | Propriété d'arrière-plan CSS | |
| --background-image | Propriété d'image d'arrière-plan CSS | |
| --background-repeat | no-repeat | Propriété de répétition d'arrière-plan CSS |
| --background-size | reprise | Propriété de taille d'arrière-plan CSS |
Modèle CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Propriétés du logo
La classe .logo est positionnée devant la classe .background et couvre l'ensemble du lecteur. Cette classe s'affiche lorsque votre récepteur est en cours de lancement. Si vous ne fournissez aucune variable .splash, la classe .logo s'affiche également lorsque votre récepteur est en état d'inactivité.
L'exemple suivant définit --logo-image sur une icône d'égaliseur nommée welcome.png. Par défaut, une image est centrée sur votre récepteur :
cast-media-player {
--logo-image: url('welcome.png');
}
Affichage Web Receiver :
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é d'arrière-plan CSS | |
| --logo-image | Propriété d'image d'arrière-plan CSS | |
| --logo-repeat | no-repeat | Propriété de répétition d'arrière-plan CSS |
| --logo-size | Propriété de taille d'arrière-plan CSS |
Modèle CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Propriétés de l'écran de démarrage
Comme la classe .logo, la classe .splash couvre l'ensemble du lecteur. Si vous définissez ces propriétés, vos variables .splash remplaceront les variables .logo lorsque votre récepteur sera 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 votre récepteur est inactif.
Par exemple, vous pouvez remplacer l'arrière-plan dégradé blanc et argenté par dimgray et ajouter une icône animée waiting... :
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Affichage Web Receiver :
Si vous ne définissez pas ces propriétés, votre récepteur utilise par défaut les paramètres .logo ou le nom de l'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é d'arrière-plan CSS | |
| --splash-image | Propriété d'image d'arrière-plan CSS | |
| --splash-repeat | Propriété de répétition d'arrière-plan CSS | |
| --splash-size | Propriété de taille d'arrière-plan CSS |
Modèle CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Diaporama
Pour afficher jusqu'à 10 images en boucle lorsque le récepteur est 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 | 10s | 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 du contenu multimédia. Il s'agit généralement d'une petite image transparente qui s'affiche 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é d'arrière-plan CSS | |
| --watermark-image | Propriété d'image d'arrière-plan CSS | |
| --watermark-position | en bas à droite | Propriété de position d'arrière-plan CSS |
| --watermark-repeat | no-repeat | Propriété de répétition d'arrière-plan CSS |
| --watermark-size | Propriété de taille d'arrière-plan CSS |
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 du lecteur et d'autres propriétés à partir 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(hue, 100%, 50%) | Couleur de la marque de 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 lors de la mise en mémoire tampon. |
| --pause-image | Image par défaut | Image à afficher lors de la mise en pause. |
| --play-image | Image à afficher dans les métadonnées pendant la lecture. | |
| --theme-hue | 42 | La teinte à utiliser pour le lecteur. |
| --progress-color | hsl(hue, 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 d'autres illustrations, consultez Récepteur multimédia stylisé.
Calibrage
Les mises en page pour la télévision ont des exigences uniques en raison de l'évolution des normes de télévision et du souhait de toujours présenter une image plein écran aux téléspectateurs. Les appareils de télévision peuvent rogner le bord extérieur d'une mise en page d'application afin de s'assurer que l'ensemble de l'écran est rempli. Ce comportement est généralement appelé "calibrage". Évitez que les éléments de l'écran ne soient rognés en raison du calibrage en intégrant une marge de 10 % sur tous les côtés de votre mise en page.
Interface utilisateur 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 d'interface utilisateur personnalisée
Le SDK Cast Web Receiver permet d'utiliser votre propre élément d'interface utilisateur personnalisé au lieu de cast-media-player.
La liaison de données d'interface utilisateur personnalisée vous permet d'utiliser votre propre élément d'interface utilisateur personnalisé et d'utiliser la
PlayerDataBinder
classe pour lier l'interface utilisateur à l'état du lecteur au lieu d'ajouter l'
cast-media-player élément à votre récepteur. Le binder permet également d'envoyer des é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
MediaElement
au code HTML pour que Web Receiver puisse l'utiliser. Si plusieurs objets MediaElement sont disponibles, vous devez taguer le MediaElement que vous souhaitez que Web Receiver utilise. Pour ce faire, ajoutez castMediaElement dans la liste de classes de la vidéo, comme indiqué ci-dessous. Sinon, Web Receiver choisira le premier MediaElement.
<video class="castMediaElement"></video>