Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Définir le style du lecteur

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.

Externe

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;
}

Intégration

<!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 :

Arrière-plan personnalisé

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 :

Écran de démarrage personnalisé

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]

F. MediaStatus.currentTime

G. MediaInformation.duration

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>

HLS sur la migration des joueurs Shaka

Optimiser pour les écrans connectés

Définir le style du lecteur Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Logo de lecture

Propriétés d'arrière-plan du lecteur

Variables et valeurs par défaut

Modèle CSS

Propriétés du logo

Variables et valeurs par défaut

Modèle CSS

Propriétés de l'écran de démarrage

Variables et valeurs par défaut

Modèle CSS

Diaporama

Variables et valeurs par défaut

Modèle CSS

Propriétés du filigrane

Variables et valeurs par défaut

Modèle CSS

Lecture, annonces et autres propriétés CSS

Variables et valeurs par défaut

Modèle CSS

Calibrage

Interface utilisateur audio par défaut

MetadataType.MUSIC_TRACK

Liaison de données d'interface utilisateur personnalisée

Définir le style du lecteur