Icône Cast
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le bouton Cast ouvre une boîte de dialogue permettant de se connecter à des récepteurs Web, de les contrôler et de s'en déconnecter.
Consultez Icônes Cast pour télécharger les modèles de bouton Cast.
Notez que le bouton Cast n'est pas spécifique à Google Cast. Il peut être utilisé pour représenter les récepteurs Web et non Web (comme les casques Bluetooth). Les Web Receivers doivent toujours apparaître dans la boîte de dialogue Cast, et jamais dans une autre boîte de dialogue, un autre menu ou une autre commande.
L'introduction de l'icône Cast permet aux utilisateurs existants de savoir que l'application émettrice est désormais compatible avec Cast et aide également les nouveaux utilisateurs de Google Cast.
Obligatoire
A Afficher un écran d'introduction Cast la première fois que des Web Receivers sont disponibles. Pour les expéditeurs iOS, affichez un écran d'introduction à Cast la première fois que le bouton Cast apparaît.
B Mettez en évidence le bouton Cast en l'entourant.
C Expliquez comment fonctionne le bouton Cast (par exemple, en affichant un message tel que "Appuyez pour caster des vidéos sur votre téléviseur").
Android
Présentation de Cast
Caster l'écran d'accueil
iOS
Présentation de Cast
Caster l'écran d'accueil
Chrome
Présentation de Cast
Caster l'écran d'accueil
Obligatoire
A Le bouton Cast doit être visible sur tous les écrans où du contenu peut être lu, et être placé au même endroit lorsque l'utilisateur parcourt ou lit du contenu. Il s'affichera également dans l'en-tête de Chrome pour un contrôle global.
B Dans Chrome, le bouton Cast peut être masqué
lorsque les Web Receivers ne sont pas disponibles. Pour les émetteurs Android et iOS, le bouton Cast doit toujours s'afficher lorsque l'appareil est connecté au Wi-Fi. Cela permet de fournir une aide appropriée si l'utilisateur a désactivé l'accès au réseau local et que les appareils ne sont plus détectables (pour en savoir plus, consultez Autorisations et découverte sur iOS).
C Dans les applications mobiles, le bouton Cast doit se trouver sur le côté droit.
D Dans Chrome, l'icône Cast doit se trouver à droite des commandes multimédias du contenu (voir par exemple la vidéo intégrée). Si les commandes multimédias contiennent un bouton plein écran, placez le bouton Cast à sa gauche.
Remarque
Google Cast utilise un modèle multitâche qui permet aux utilisateurs de parcourir l'application émettrice et d'autres applications pendant la diffusion. Le bouton Cast doit être visible sur tous les écrans où du contenu peut être lu. L'utilisateur n'a ainsi pas besoin de chercher où mettre en pause ou arrêter le contenu en cours de lecture sur le téléviseur.
Android
L'expéditeur s'est déconnecté
Caster l'écran d'accueil
iOS
L'expéditeur s'est déconnecté
Caster l'écran d'accueil
Chrome
L'expéditeur s'est déconnecté
Caster l'écran d'accueil
Obligatoire
A Déconnecté : lorsque les Web Receivers sont disponibles, le bouton Cast s'affiche.
B Connexion : lorsque le Web Receiver se connecte, le bouton Cast anime progressivement les ondes de l'icône (pour en savoir plus, consultez la note ci-dessous).
C Connecté : lorsque cette application est connectée au Cast Web Receiver, son bouton Cast s'affiche avec une forme de cadre remplie.
Bonnes pratiques
Pour chacun des états du bouton, utilisez des couleurs qui correspondent au style des autres éléments d'UI de votre application. L'utilisation d'une couleur de mise en évidence distincte (comme le jaune) pour l'état "ON" (ACTIVÉ)/"Connected" (Connecté) est facultative.
Remarques
- L'icône Cast s'affiche sur Chrome, Android et iOS pour permettre d'accéder à l'extension Cast, quelle que soit la disponibilité des appareils Cast.
- L'état "Connexion (animée)" s'affiche lorsque la connexion à l'API Cast prend plus de temps que prévu (les SDK Android et Chrome animeront automatiquement l'icône Cast). Une fois la connexion établie, l'application Web Receiver se lance.
- L'état "ON / Connecté" de l'icône Cast a été modifié et utilise désormais un remplissage plein dans le cadre de l'icône. La nouvelle icône Cast et les modèles d'icônes sont disponibles
ici.
Android
L'expéditeur a déconnecté Cast
Caster l'écran d'accueil
Émetteur, Cast en cours de connexion
Caster l'écran d'accueil
Expéditeur, Cast connecté
Chargement de l'application Web Receiver
Expéditeur, Cast connecté
Application Web Receiver chargée / inactive
iOS
Expéditeur, Cast indisponible
Caster l'écran d'accueil
L'expéditeur a déconnecté Cast
Caster l'écran d'accueil
Émetteur, Cast en cours de connexion
Caster l'écran d'accueil
Expéditeur, Cast connecté
Chargement de l'application Web Receiver
Expéditeur, Cast connecté
Application Web Receiver chargée / inactive
Chrome
Expéditeur, Cast indisponible
L'icône Cast s'affiche dans Chrome pour vous permettre d'accéder à l'extension Cast, quel que soit l'état de la connexion.
Caster l'écran d'accueil
L'expéditeur a déconnecté Cast
Caster l'écran d'accueil
Émetteur, Cast en cours de connexion
Caster l'écran d'accueil
Expéditeur, Cast connecté
Chargement de l'application Web Receiver
Expéditeur, Cast connecté
Application Web Receiver chargée / inactive
Les images utilisées dans ce guide de conception sont fournies par la Blender Foundation et partagées sous licence de droits d'auteur ou Creative Commons.
- Elephant's Dream : (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute/www.elephantsdream.org
- Sintel : (c) copyright Blender Foundation | www.sintel.org
- Tears of Steel : (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny : (c) copyright 2008, Blender Foundation / www.bigbuckbunny.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/26 (UTC).
[null,null,["Dernière mise à jour le 2025/07/26 (UTC)."],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
