Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le styled Media Receiver (SMR) permet à l'application émettrice de lire des contenus multimédias
un appareil Cast sans créer votre propre application réceptrice personnalisée. Vous pouvez
Personnalisez le jeu de couleurs et le branding SMR en fournissant votre propre fichier CSS
pendant l'enregistrement.
Inscription
Pour utiliser le SMR pour votre application, sélectionnez l'option Styled Media Receiver.
lorsque vous ajoutez une application
Console 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 où
vous saisissez l'URL de votre feuille de style. Vous pouvez utiliser les styles par défaut ou
indiquez l'URL HTTPS de votre fichier CSS. Vous pouvez utiliser votre propre serveur pour héberger
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.
Le SMR est compatible avec la vidéo, l'audio et les images. Il est contrôlé par un expéditeur.
à 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 Polices préinstallées pour obtenir la liste des
pré-installées avec le récepteur.
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. Ce cours est aussi
utilisé lorsque le récepteur est inactif et qu'aucune classe .splash n'est
déclaré.
.progressBar: barre de progression de la lecture des contenus multimédias.
.splash: écran affiché lorsque le récepteur est inactif. Si cette
n'est pas déclarée, le récepteur utilise par défaut .logo ou le nom de l'application.
.watermark: filigrane affiché lors de la lecture du contenu multimédia.
Voici un exemple de fichier CSS qui utilise ces classes:
Vous trouverez ci-dessous quelques exemples d'utilisation de ces classes.
Vidéo
Remarque: L'illustration de l'image vidéo fait 96 x 143 pixels. Il s'agit de la première ressource image.
associées aux métadonnées multimédias sont sélectionnées pour être affichées. Les images sont mises à l'échelle pour
s'adaptent aux dimensions attendues.
Audio
Remarque: La pochette de l'album audio fait 384 x 384 pixels et la première ressource d'image est la première.
associées aux métadonnées multimédias sont sélectionnées pour être affichées. Les images sont mises à l'échelle pour
s'adaptent aux dimensions attendues.
Images de Big Buck Bunny: (c) copyright 2008,
Fond de teint Blender / www.bigbuckbunny.org
Image de Sintel: (c) copyright Blender Foundation / www.sintel.org
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/25 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/25 (UTC)."],[[["\u003cp\u003eThe Styled Media Receiver (SMR) lets you play media on Cast devices without building a custom receiver application, offering branding customization through a CSS file.\u003c/p\u003e\n"],["\u003cp\u003eRegister your application in the Google Cast SDK Developer Console, selecting "Styled Media Receiver" and providing a link to your CSS for customization.\u003c/p\u003e\n"],["\u003cp\u003eThe SMR supports various media types (video, audio, images) and adheres to Cast UX guidelines, controlled by your sender application using the Cast SDK media channel.\u003c/p\u003e\n"],["\u003cp\u003eCustomize the appearance of the receiver using CSS classes for background, logo, progress bar, splash screen, and watermark, with provided examples for styling.\u003c/p\u003e\n"]]],["The Styled Media Receiver (SMR) enables media playback on Cast devices without a custom receiver app. During registration in the Google Cast SDK Developer Console, you can select SMR and customize its appearance. This involves providing a CSS file URL or using default styles. The SMR supports video, audio, and images, utilizing CSS classes like `.background`, `.logo`, `.progressBar`, `.splash`, and `.watermark` for styling. You can adjust the SMR display when launching, playing media, or on idle state using the appropriate CSS class.\n"],null,["# Styled Media Receiver\n\nThe Styled Media Receiver (SMR) allows your sender application to play media on\na Cast device without creating your own custom receiver application. You can\ncustomize the SMR color scheme and branding by providing your own CSS file\nduring registration.\n\nRegistration\n------------\n\nTo use the SMR for your application select the **Styled Media Receiver** option\nwhen you add a new application in the\n[Google Cast SDK Developer Console](https://cast.google.com/publish).\nSee [Registration](/cast/docs/registration) for more information. This option\nincludes a link to **Preview** the default style sheet as well as a field where\nyou enter the URL to your style sheet. You can either use the default styles or\nprovide the HTTPS URL to your CSS file. You can use your own server to host the\nCSS file. Once you provide the URL to your CSS file, you can click **Preview**\nto see how your styles will look on the receiver.\n| **Note:** If you register a Styled Media Receiver, but just use the default styles, the receiver displays your application name when the receiver is loading or in the idle state.\n\nSupported media\n---------------\n\nAll receivers support the media types, as described in\n[Supported Media](/cast/docs/media).\n\nThe SMR supports video, audio and images and is controlled from a sender\napplication using the Cast SDK media channel. The SMR fully complies with the\n[UX Guidelines](/cast/docs/ux_guidelines) for media playback on a Cast device.\n\nType fonts\n----------\n\nSee [Pre-installed fonts](/cast/docs/receiver_apps#fonts) for a list of\nfonts pre-installed with the receiver.\n\nCSS\n---\n\nThe Styled Media Receiver uses the following CSS classes:\n\n- **.background**: The background for the receiver.\n- **.logo**: The logo shown when the receiver is launching. This class is also used when the receiver is in the idle state and no .splash class is declared.\n- **.progressBar**: The progress bar for media playback.\n- **.splash**: The screen shown when the receiver is in an idle state. If this class is not declared, the receiver will default to .logo or the app name.\n- **.watermark**: A watermark shown when the media is playing.\n\nHere is an example CSS file that uses these classes: \n\n```gas\n.background {\n background: center no-repeat url(background.png);\n}\n\n.logo {\n background-image: url(logo.png);\n}\n\n.progressBar {\n background-color: rgb(238, 255, 65);\n}\n\n.splash {\n background-image: url(splash.png);\n}\n\n.watermark {\n background-image: url(watermark.png);\n background-size: 57px 57px;\n}\n```\n\nFollowing are some illustrations of these classes in use.\n\n#### Video\n\n**Note**: The video image art is 96x143 pixels and the first image resource\nassociated with the media metadata is selected for display. Images are scaled to\nfit the expected dimensions.\n\n#### Audio\n\n**Note**: The audio album art is 384x384 pixels and the first image resource\nassociated with the media metadata is selected for display. Images are scaled to\nfit the expected dimensions.\n\n\nImages from Big Buck Bunny: (c) copyright 2008,\nBlender Foundation / www.bigbuckbunny.org\n\nImage from Sintel: (c) copyright Blender Foundation / www.sintel.org"]]
