Récepteur multimédia stylisé

Le récepteur SMR permet à votre application d'émetteur de lire des contenus multimédias sur un appareil Cast sans créer votre propre application réceptrice personnalisée. Vous pouvez personnaliser le jeu de couleurs et la marque SMR en fournissant votre propre fichier CSS lors de l'enregistrement.

Inscription

Pour utiliser le SMR pour votre application, sélectionnez l'option Styled Media Receiver lorsque vous ajoutez une application dans la console développeur du SDK Google Cast. Pour en savoir plus, consultez la section Inscription. Cette option inclut un lien d'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 de 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 Aperçu pour voir à quoi ressembleront vos styles sur le récepteur.

Médias compatibles

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

Le SMR est compatible avec les vidéos, l'audio et les images. Il est contrôlé à partir d'une application émettrice à l'aide du canal mé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

Pour obtenir la liste des polices préinstallées avec le récepteur, consultez la section Polices préinstallées.

CSS

Le récepteur multimédia stylisé 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 inactif et qu'aucune classe .splash n'est déclarée.
  • .progressBar: barre de progression de la lecture des contenus multimédias.
  • .splash: l'écran s'affiche lorsque le récepteur est inactif. Si cette classe n'est pas déclarée, le destinataire utilise par défaut le nom de domaine .logo ou l'application.
  • .watermark: filigrane affiché pendant la lecture du contenu multimédia.

Voici un exemple de fichier CSS utilisant 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;
}

Voici quelques illustrations de ces classes utilisées.

Vidéo

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

Son

Remarque: La pochette de l'album audio mesure 384 x 384 pixels, et la première ressource d'image associée aux métadonnées multimédias est sélectionnée pour être affichée. 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