Expérience utilisateur avec la plate-forme Google Cast
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Google Cast permet aux applications Web Android, iOS et Chrome de diffuser du contenu (vidéo, audio et partage d'écran, par exemple) sur des appareils compatibles avec Cast, comme:
- Google Chromecast
- Téléviseurs fonctionnant avec Google Cast
- Enceintes fonctionnant avec Google Cast
- Écrans connectés (écran LCD portable à écran tactile utilisé comme client léger)
- Tablettes Android
Dans le modèle d'interaction Google Cast, le téléphone mobile, la tablette ou l'ordinateur portable est l'expéditeur qui sert de télécommande pour contrôler la lecture, et le téléviseur, l'écran ou la tablette sur station d'accueil est le récepteur qui reçoit les instructions de l'expéditeur et affiche le contenu à partir de la connexion Internet du récepteur. Toutes les actions de l'utilisateur (tapotements et balayages) peuvent se produire à la fois sur l'appareil de l'expéditeur et sur le récepteur Web.
Le castage repose sur la coordination entre deux écrans ou plus : l'UI de l'expéditeur et l'UI du récepteur doivent fonctionner ensemble. Par exemple, si vous appuyez sur un bouton d'un appareil mobile pour mettre en pause le contenu, le téléviseur doit indiquer qu'il est mis en pause, tandis que l'appareil mobile doit fournir un bouton de lecture pour reprendre la lecture.
Remarques
En raison de limitations matérielles et de ressources, certaines restrictions s'appliquent aux applications compatibles avec Google Cast:
- L'appareil Cast est un appareil à faible consommation d'énergie soumis à des limitations en termes de mémoire, de processeur et de GPU. L'application Web Receiver doit donc être aussi légère que possible.
- Pour les modèles d'interaction Cast et Google Cast, vous pouvez créer des onglets, des fenêtres ou des pop-ups dans l'application Web Receiver ou l'application d'envoi, et accepter directement les entrées utilisateur, telles que les appuis ou les balayages. Par exemple, l'application Web Receiver sur une tablette ou un écran en mode station d'accueil peut afficher un bouton de pause et recevoir un appui de l'utilisateur. De cette manière, toutes les actions sur l'application doivent être déclenchées à partir d'un récepteur Web ou d'une application d'expéditeur.
- Les écrans connectés acceptent les entrées utilisateur via une application d'envoi ou via l'interface utilisateur.
- Le Web Receiver est un navigateur Chrome optimisé pour la lecture de vidéos. Par conséquent, WebGL et Chrome Native Client (NaCL) ne sont actuellement pas compatibles, ni les extensions Chrome.
- Cast prend en charge la lecture d'un seul flux multimédia simultané dans les balises
<audio> et <video>, ou plusieurs pistes audio à l'aide de l'API WebAudio. Un seul élément vidéo peut être actif dans le DOM à tout moment.
De plus, le compositing, la manipulation, les transformations, les rotations ou le zoom vidéo ne sont pas acceptés.
Principes de conception généraux
Tenez compte des points suivants lorsque vous développez votre interface utilisateur.
Interface du récepteur Web:
- Le Web Receiver peut comporter à la fois des éléments interactifs et des éléments d'information pour décrire l'état de l'application (par exemple, en pause ou en lecture, ou des messages d'erreur). L'interaction utilisateur peut se produire sur l'émetteur Cast (téléphone, tablette ou navigateur Chrome) ou sur le récepteur Web (téléviseur, écrans ou tablettes).
- N'oubliez pas que l'action vidéo se déroule au milieu de l'écran du téléviseur et que vos éléments d'interface utilisateur ne doivent pas interférer avec la présentation. Placez les éléments de l'interface utilisateur dans le tiers inférieur de l'écran du récepteur Web, en laissant une marge de 10 % sur les bords de l'écran pour un éventuel dépassement.
- Dans la mesure du possible, les transitions d'un état d'écran à un autre doivent être fluides et donner un aspect cinématographique. Au lieu de passer brusquement d'un état à un autre, utilisez des transitions telles que le fondu et le fondu avant. Par exemple, l'état de chargement du contenu persiste à l'écran et se fond dans l'expérience de lecture du contenu multimédia.
Interface de l'expéditeur :
- L'expéditeur prend en charge les actions de l'utilisateur, et le récepteur Web affiche des informations d'état.
Par exemple, si un contenu est en pause, le téléviseur doit indiquer qu'il est en pause, tandis que l'appareil mobile indique qu'il est prêt à commencer la lecture (par exemple, en présentant un bouton de lecture à l'utilisateur).
- Sur Internet, la vitesse est primordiale. Les utilisateurs doivent pouvoir trouver rapidement la commande de diffusion et voir le contenu commencer à être diffusé immédiatement sur le grand écran. Pendant le chargement du contenu, fournissez des indicateurs de chargement animés et utilisez des transitions pour accélérer le chargement.
Le moyen le plus simple de vous assurer que votre application Cast respecte ces principes consiste à examiner votre interface utilisateur à l'aide de la checklist de conception Cast et à tester vos applications Cast.
Consignes relatives à la marque
Les consignes relatives à la marque Google Cast suivantes s'adressent aux développeurs d'applications et se concentrent sur les exigences supplémentaires que vous devez respecter pour décrire votre application par écrit.
Pour connaître les consignes relatives à la marque pour les appareils Cast, consultez le Partner Marketing Hub.
Pour informer les autres utilisateurs que votre application fonctionne avec Google Cast, utilisez le terme "compatible Google Cast". Toutefois, assurez-vous que votre application respecte les Conditions d'utilisation supplémentaires du SDK Cast pour les développeurs et la checklist de conception, et que votre utilisation de "Compatible avec Google Cast" respecte nos consignes relatives au branding.
Vous pouvez également utiliser un badge Google Cast à condition que votre application ou votre appareil respectent nos consignes concernant les badges. Google se réserve le droit de vous demander de modifier ou de cesser d'utiliser le badge si celui-ci ne respecte pas les consignes relatives à la marque.
"Google Cast" au format texte
- Lorsque vous décrivez qu'une application (et non un produit matériel) est compatible Cast, utilisez l'expression "compatible Google Cast". (par exemple, "Cette application est compatible avec Google Cast").
- Lorsque vous décrivez un produit matériel tiers compatible avec Cast, utilisez "Ce {téléviseur} fonctionne avec Google Cast", "Ces {enceintes} fonctionnent avec Google Cast".
- Lorsque vous écrivez "Google" et "Cast", vous devez les mettre en majuscules.
- Dans tous les éléments marketing qui utilisent le texte "Google Cast" ou le badge/logo, vous devez inclure la mention légale suivante: Google Cast est une marque de Google LLC.
- N'indiquez pas Google Cast dans le titre de l'application (par exemple, "Application XYZ Google Cast").
Messagerie de l'application compatible Google Cast
Vous pouvez promouvoir votre application comme suit:
- "XYZ est une application compatible Google Cast qui vous permet de diffuser vos divertissements préférés en streaming sur votre téléviseur depuis votre appareil mobile."
- "L'application XYZ est désormais disponible pour les téléviseurs compatibles avec Google Cast."
- "L'application XYZ est désormais disponible pour tous les produits Google Cast, y compris Google Chromecast, Google Cast Audio, ainsi que les téléviseurs et enceintes compatibles avec Google Cast."
- "L'application XYZ est compatible avec Google Cast. Vous pouvez ainsi profiter de tous vos programmes/films/musiques/jeux préférés sur votre téléviseur compatible avec Google Cast."
- "L'application XYZ est désormais compatible avec Google Cast, ce qui permet aux utilisateurs de diffuser du contenu depuis leur téléphone vers un téléviseur compatible avec Google Cast."
Badge Google Cast
Vous pouvez utiliser les badges "Google Cast" sur votre site Web, votre fiche sur la plate-forme de téléchargement d'applications, vos supports marketing et vos supports promotionnels pour indiquer la compatibilité avec les appareils qui utilisent le protocole Cast.
- Ne modifiez pas la couleur, les proportions, l'espacement ni tout autre aspect de l'image du badge.
- Lorsqu'il est utilisé avec les logos d'autres technologies d'ingrédients (par exemple, Bluetooth, Spotify Connect, AirPlay, etc.), le badge Google Cast doit être de la même taille ou plus grand.
- Ne faites pas du badge l'élément principal de votre page.
- Gardez une certaine distance entre le badge et les autres logos et icônes de votre page.
- Utilisez un badge noir sur un arrière-plan blanc, clair ou de tons moyens.
- Lorsque vous utilisez le badge sur un arrière-plan noir ou sombre, utilisez le badge blanc.
- N'utilisez pas le badge sur une page comportant ou affichant du contenu réservé aux adultes, faisant la promotion de jeux d'argent et de hasard, faisant la promotion de la violence, contenant des propos haineux, impliquant la vente de tabac ou d'alcool à des personnes de moins de 21 ans, enfreignant d'autres lois ou règlements applicables, ou qui est répréhensible.
Association de badges
Lorsqu'il est utilisé en ligne, le badge Google Cast doit être associé à l'un des éléments suivants:
- Consultez la liste des applications et produits compatibles Google Cast sur g.co/castapps.
- Liste des produits que vous avez publiés.
- Page d'informations détaillées sur un produit spécifique que vous avez publiée.
- Liste des applications que vous avez publiées.
- Une page d'informations sur une application spécifique que vous avez publiée sur Google Play ou sur l'App Store d'Apple.
Télécharger les composants du badge Google Cast
Le package de téléchargement comprend les formats Portable Network Graphics (.png), Adobe Illustrator (.ai) et Encapsulated Postscript (.eps).
Aperçu des badges Google Cast
Consultez la page des consignes sur les badges du Partner Hub pour connaître tous les badges disponibles et les instructions d'utilisation.
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).
[null,null,["Dernière mise à jour le 2025/07/25 (UTC)."],[[["\u003cp\u003eGoogle Cast enables streaming of content like video and audio from Android, iOS, and Chrome to compatible devices.\u003c/p\u003e\n"],["\u003cp\u003eThe sender device (phone, tablet, laptop) acts as a remote, while the receiver device (TV, speaker, display) plays the content.\u003c/p\u003e\n"],["\u003cp\u003eBoth sender and receiver UIs must be coordinated for a seamless user experience, with actions reflected on both.\u003c/p\u003e\n"],["\u003cp\u003eWeb Receiver applications should be lightweight due to device limitations, and interactive elements should be strategically placed for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast branding guidelines must be followed when promoting app compatibility, including using the approved badge and messaging.\u003c/p\u003e\n"]]],["Google Cast enables content streaming from sender devices (phones, tablets, laptops) to receiver devices (Chromecast, Cast-enabled TVs/speakers/displays). Senders act as remote controls, while receivers display content from their internet connection. Both sender and receiver UIs coordinate actions like pausing/playing. Design considerations include lightweight receiver apps, UI placement within the lower third of the screen, and smooth transitions. Apps can be described as \"Google Cast-enabled\" and use a Google Cast badge, following specific branding guidelines and linking requirements.\n"],null,["# User Experience With the Google Cast Platform\n\nGoogle Cast allows Android, iOS, and Chrome web apps to \"stream\" content ---\nlike video, audio and screen sharing (mirroring) --- to Cast-ready devices\nlike:\n\n- Google Chromecast\n- TVs that work with Google Cast\n- Speakers that work with Google Cast\n- Smart Displays (a portable touchscreen LCD monitor used as a thin client)\n- Android Tablets\n\nIn the Google Cast interaction model, the mobile phone, tablet or laptop is the\n**sender** which acts as a remote control to control the playback, and the TV,\ndisplay or docked tablet is the **receiver** which receives instructions from\nthe sender and displays the content from the receiver's Internet connection. All\nthe user actions (taps and swipes) can take place on **both** the sender device\nor the Web Receiver.\n\nCasting relies on the coordination between two or more screens; the sender UI\nand the receiver UI --- they must work together. For example, if you press a\nbutton on a mobile device to pause the content, the TV should indicate that it\nis paused, while the mobile device should provide a play button to resume\nplayback.\n\nConsiderations\n--------------\n\nDue to hardware and resource limitations, there are certain restrictions placed\non Google Cast-enabled applications:\n\n- The Cast device is a low-power device with memory, CPU and GPU limitations, so the Web Receiver application should be as lightweight as possible.\n- For Cast and Google Cast interaction models, tabs, windows or popups can be created in both the Web Receiver or sender app, as well as directly accept user input, such as taps or swipes. For example, the Web Receiver app on a docked tablet or display can display a pause button and receive a user's tap. In this way, *all* actions on the application must be triggered from either a Web Receiver or sender application.\n- Smart Displays support user input through a sender app or via touch on the UI.\n- The Web Receiver is a Chrome browser optimized for video playback. As such, WebGL and Chrome Native Client (NaCL) are not currently supported, nor are Chrome extensions.\n- Cast supports a single concurrent media stream playback in the `\u003caudio\u003e` and `\u003cvideo\u003e` tags, or multiple audio tracks using the WebAudio API. Only one video element may be active in the DOM at any time. Additionally, video compositing, manipulation, transformations, rotations or zooming are not supported.\n\nOverall design principles\n-------------------------\n\nKeep the following in mind as you develop your user interface.\n\n**Web Receiver interface:**\n\n- The Web Receiver can have both interactive elements and informational elements to describe the state of the app, such as paused or playing, or error messages. User interaction can take place on the Cast sender (phone, tablet, or Chrome browser) or the Web Receiver (TV, displays, or tablets).\n- Remember that the video action is happening in the middle of the TV screen, and your UI elements should not interfere with the presentation. Place UI elements within the lower third of the Web Receiver display, leaving a 10% margin from the edges of the screen for possible [overscan](/cast/docs/caf_receiver/customize_ui#overscan).\n- When possible, transitions from one screen state to another should be smooth and feel cinematic. Rather than abrupt moves from state to state, use transitions like fade-in and fade-out. For example, the content-loading state lingers on-screen and fades into the media playing experience.\n\n**Sender interface:**\n\n- The sender supports user actions and the Web Receiver displays state information. For example, if content is paused, the TV should indicate that it is paused, while the mobile device indicates it is ready to start playing (for example, showing the user a play button).\n- Speed matters. Users need to be able to quickly locate the casting control and see content start playing immediately on the large screen. While content is loading, provide animated loading indicators and use transitions to help make things feel faster.\n\nThe easiest way to ensure that your Cast application follows these principles is\nto review your user interface with the Cast [Design Checklist](/cast/docs/design_checklist)\nand [test your Cast applications](/cast/docs/testing).\n\nBrand guidelines\n----------------\n\nThe following Google Cast brand guidelines are for app developers and focus on\nthe additional requirements you must comply with to describe your app in text.\nFor Cast devices brand guidelines see the\n[Partner Marketing Hub](https://partnermarketinghub.withgoogle.com/brands/google-cast/overview/brand-introduction/).\nYou can let others know that your app works with Google Cast by using\nthe term \"Google Cast-enabled\". However be sure that your app complies\nwith the Cast [SDK Additional Developer Terms of Service](/cast/docs/terms)\nand the [Design Checklist](/cast/docs/design_checklist), and that your\nuse of \"Google Cast-enabled\" complies with our branding guidelines.\n\nYou can similarly use a [Google Cast badge](#google_cast_badge)\nas long as your app or device complies with our badging guidelines. Google\nreserves the right to request that you modify or cease your use of the badge if\nit does not comply with the brand guidelines.\n\n### \"Google Cast\" in text\n\n- When describing an app (not a hardware product) as being Cast-enabled, use the phrase \"Google Cast-enabled\". For example: \"This app is Google Cast-enabled\".\n- When describing a Cast compatible third-party hardware product, use \"This {TV} works with Google Cast\", \"These {speakers} work with Google Cast\".\n- When written in text, \"Google\" and \"Cast\" should be capitalized.\n- In any marketing asset that uses \"Google Cast\" in text or the badge/logo, you must include the following legal attribution: Google Cast is a trademark of Google LLC.\n- Don't put Google Cast in the title of the app (such as XYZ Google Cast App).\n\n### Google Cast-enabled app messaging\n\nYou can promote your app as follows:\n\n- \"XYZ is a Google Cast-enabled app which lets you stream your favorite entertainment from your mobile device to your TV.\"\n- \"The XYZ app is now available for TVs that work with Google Cast.\"\n- \"The XYZ app is now available for all Google Cast products including Google Chromecast, Google Cast Audio, and TVs and speakers that work with Google Cast.\"\n- \"The XYZ app is Google Cast-enabled, allowing you to enjoy all your favorite shows/movies/music/games on your TV that works with Google Cast.\"\n- \"The XYZ app now has Google Cast support, allowing users to stream content from their phone to their TV that works with Google Cast.\"\n\n### Google Cast badge\n\nYou can use the \"Google Cast\" badges on your website, app store listing,\nmarketing materials and promotional materials to display compatibility with\ndevices that use the Cast protocol.\n\n- Don't modify the color, proportions, spacing or any other aspect of the badge image.\n- When used alongside logos for other ingredient technologies (for example, Bluetooth, Spotify Connect, AirPlay, etc.), the Google Cast badge must be of equal or greater size.\n- Don't make the badge the primary element on your page.\n- Keep some distance between the badge and other logos and icons on your page.\n- When used on white, light, or medium-toned background, use a black badge.\n- When used on a black or dark-toned background, use the white badge.\n- Don't use the badge on a page that contains or displays adult content, promotes gambling, promotes violence, contains hate speech, involves the sale of tobacco or alcohol to persons under twenty-one years of age, violates other applicable laws or regulations or is otherwise objectionable.\n\n### Badge linking\n\nWhen used online, the Google Cast badge must link to one of the following:\n\n- Google's list of Google Cast-enabled apps and products at [g.co/castapps](http://g.co/castapps).\n- A list of products published by you.\n- A specific product detail page published by you.\n- A list of apps published by you.\n- A specific app detail page published by you, on Google Play, or in the Apple App Store.\n\n### Download Google Cast badge assets\n\nThe download bundle includes Portable Network Graphics (.png), Adobe\nIllustrator (.ai), and Enapsulated Postscript (.eps) formats.\n\n- [Partner Hub Downloads page](https://partnermarketinghub.withgoogle.com/brands/google-cast/downloads/)\n\n### Preview Google Cast badges\n\nRefer to the [Partner Hub Badges Guidelines page](https://partnermarketinghub.withgoogle.com/brands/google-cast/visual-identity/visual-identity/#badge-guidelines)\nfor all available badges and instructions on usage."]]
