Récepteur multimédia stylisé

Le styled Media receiver (SMR) permet à l'application émettrice de lire des contenus multimédias sur un appareil Cast sans avoir à créer votre propre application de récepteur personnalisée. Vous pouvez personnaliser le jeu de couleurs et le branding SMR en fournissant votre propre fichier CSS lors de l'enregistrement.

Inscription

Pour utiliser le SMR pour votre application, sélectionnez l'option Styled MediaReceiver (Récepteur multimédia stylisé) lorsque vous ajoutez une application dans la console pour développeur du SDK Google Cast. Pour en savoir plus, consultez la page Inscription. Cette option inclut un lien permettant d'afficher un aperçu de la feuille de style par défaut, ainsi qu'un champ dans lequel vous pouvez saisir l'URL de votre feuille de style. Vous pouvez utiliser les styles par défaut ou fournir l'URL HTTPS à votre fichier CSS. Vous pouvez utiliser votre propre serveur pour héberger le fichier CSS. Une fois que vous avez fourni l'URL de votre fichier CSS, vous pouvez cliquer sur Preview (Aperçu) pour voir à quoi ressembleront vos styles sur le récepteur.

Remarque :Si vous enregistrez un récepteur multimédia stylisé, mais que vous utilisez simplement les styles par défaut, le récepteur affiche le nom de votre application lors du chargement ou dans l'état inactif.

Contenus multimédias compatibles

Tous les récepteurs sont compatibles avec les types de contenus multimédias, comme décrit dans la section Contenus multimédias compatibles.

Le SMR est compatible avec les vidéos, l'audio et les images. Il est contrôlé depuis une application émettrice à l'aide du canal multimédia du SDK Cast. Le SMR est entièrement conforme aux consignes relatives à l'expérience utilisateur pour la lecture de contenus multimédias sur un appareil Cast.

Saisir des polices

Consultez la section Polices préinstallées pour obtenir la liste des polices préinstallées.

CSS

Styled Media Receiver utilise les classes CSS suivantes:

• .background: arrière-plan du récepteur.
• .logo: logo affiché lors du lancement du récepteur. Cette classe est également utilisée lorsque le récepteur est à l'état inactif et qu'aucune classe .splash n'est déclarée.
• .progressBar: barre de progression de la lecture des contenus multimédias.
• .splash: écran affiché lorsque le récepteur est inactif. Si cette classe n'est pas déclarée, le récepteur utilise par défaut .logo ou le nom de l'application.
• .watermark: filigrane affiché lorsque le contenu multimédia est en cours de lecture.

Voici un exemple de fichier CSS qui utilise ces classes:

.background {
  background: center no-repeat url(background.png);
}

.logo {
  background-image: url(logo.png);
}

.progressBar {
  background-color: rgb(238, 255, 65);
}

.splash {
  background-image: url(splash.png);
}

.watermark {
  background-image: url(watermark.png);
  background-size: 57px 57px;
}

Vous trouverez ci-dessous quelques illustrations de l'utilisation de ces classes.

Vidéo

Remarque: L'illustration de l'image vidéo fait 96 x 143 pixels, et la première ressource d'image associée aux métadonnées multimédias est sélectionnée pour l'affichage. Les images sont mises à l'échelle pour s'adapter aux dimensions attendues.

Audio

Remarque: La pochette de l'album audio fait 384 x 384 pixels, et la première ressource d'image associée aux métadonnées multimédias est sélectionnée pour l'affichage. Les images sont mises à l'échelle pour s'adapter aux dimensions attendues.

       

Images de Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

Image de Sintel: (c) copyright Blender Foundation / www.sintel.org