L'icône Cast ouvre une boîte de dialogue vous permettant de vous connecter, de contrôler et de vous déconnecter de Web Receiver.
Consultez la page Icônes Cast pour télécharger les modèles correspondants.
Notez que l'icône Cast n'est pas spécifique à Google Cast. Elle peut être utilisée pour représenter à la fois des récepteurs Web et d'autres appareils (tels que les casques Bluetooth). Les récepteurs Web doivent toujours apparaître dans la boîte de dialogue "Caster", et jamais dans une autre boîte de dialogue, un autre menu ou une autre commande.
Présenter Cast aux utilisateurs
L'icône Cast permet aux utilisateurs existants de savoir que l'application émettrice est désormais compatible avec la diffusion et aide également les nouveaux utilisateurs de Google Cast.
Obligatoire
A Affichez un écran d'introduction à Cast la première fois que Web Receiver est disponible. Pour les expéditeurs iOS, affichez un écran d'introduction Cast la première fois que l'icône Cast s'affiche.
B Faire en sorte que l'icône Cast soit mise en évidence en entourant celle-ci
C Expliquer son fonctionnement (par exemple,
afficher un message tel que "Appuyez pour caster des vidéos sur votre téléviseur")
Android
Présentation de Cast
![Présentation de Cast](https://developers.google.cn/static/cast/images/a/prompting1_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
iOS
Présentation de Cast
![](https://developers.google.cn/static/cast/images/i/prompting1_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Chrome
Présentation de Cast
![Présentation de Cast](https://developers.google.cn/static/cast/images/w/prompting1_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![Caster l'écran d'accueil](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Disponibilité de l'icône Cast
Obligatoire
A L'icône Cast doit être visible sur tous les écrans affichant du contenu lisible, et doit être placée au même endroit lorsque vous naviguez ou lisez du contenu. Il apparaîtra également dans l'en-tête de Chrome pour un contrôle global.
B Dans Chrome, l'icône Cast peut être masquée lorsque les récepteurs Web ne sont pas disponibles. Pour les expéditeurs Android et iOS, l'icône Cast doit toujours s'afficher lorsque l'appareil est connecté au Wi-Fi. Ainsi, si l'utilisateur a désactivé l'accès au réseau local et que les appareils deviennent inaccessibles, l'utilisateur peut obtenir de l'aide (voir Autorisations et détection iOS pour plus d'informations).
C Dans les applications mobiles, l'icône Cast doit se trouver sur le côté droit.
D Dans Chrome, l'icône Cast doit se trouver à droite dans les commandes multimédias de contenu (voir la vidéo intégrée, par exemple). Si les commandes multimédias contiennent un bouton plein écran, placez-le à 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. L'icône Cast doit être visible sur tous les écrans affichant du contenu lisible, afin que l'utilisateur n'ait pas à rechercher où mettre en pause ou arrêter la lecture du contenu sur le téléviseur.
Android
Expéditeur déconnecté
![Expéditeur déconnecté](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
iOS
Expéditeur déconnecté
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Chrome
Expéditeur déconnecté
![Expéditeur déconnecté](https://developers.google.cn/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
États de l'icône Cast
Obligatoire
A Déconnecté: lorsque des récepteurs Web sont disponibles, le
bouton Cast s'affiche
B Connexion: lorsque le récepteur Web se connecte, le bouton Cast anime progressivement les ondes qui apparaissent sur l'icône (pour en savoir plus, voir la remarque ci-dessous)
C Connecté: lorsque cette application est connectée au cadre Cast, le bouton Cast s'affiche avec un bouton Cast plein
Bonnes pratiques
Pour chacun des états du bouton, utilisez des couleurs qui correspondent au style des autres éléments d'interface utilisateur de votre application. L'utilisation d'une couleur de mise en surbrillance distincte (comme le jaune) pour l'état "Activé / Connecté" est facultative.
Remarques
- L'icône Cast s'affiche dans Chrome, Android et iOS pour permettre d'accéder à l'extension Cast, quel que soit l'appareil Cast disponible.
- L'état "Connexion (animation)" apparaît lorsque la connexion à l'API Cast prend plus de temps que prévu (les SDK Android et Chrome animent automatiquement l'icône Cast). Une fois connecté, l'application Web Receiver se lance.
- L'état "Activé / Connecté" de l'icône Cast a été mis à jour et utilise désormais un remplissage plein dans le cadre de l'icône. Les nouveaux modèles d'icônes et d'icônes Cast sont disponibles sur cette page.
Android
Expéditeur, Cast déconnecté
![Expéditeur, Cast déconnecté](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![Caster l'écran d'accueil](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, connexion Cast
![Expéditeur, connexion Cast](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![Caster l'écran d'accueil](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, Cast connecté
![Expéditeur, Cast connecté](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=19&hl=fr)
Chargement de l'application Web Receiver
![Chargement de l'application Web Receiver](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=19&hl=fr)
Expéditeur, Cast connecté
![Expéditeur, Cast connecté](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=19&hl=fr)
Application Web Receiver chargée / inactive
![Application Web Receiver chargée / inactive](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=19&hl=fr)
iOS
Expéditeur, Cast indisponible
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, Cast déconnecté
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, connexion Cast
![Expéditeur, connexion Cast](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, Cast connecté
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=19&hl=fr)
Chargement de l'application Web Receiver
![Chargement de l'application Web Receiver](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=19&hl=fr)
Expéditeur, Cast connecté
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=19&hl=fr)
Application Web Receiver chargée / inactive
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=19&hl=fr)
Chrome
Expéditeur, Cast indisponible
![Expéditeur, Cast indisponible](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=19&hl=fr)
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
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, Cast déconnecté
![Expéditeur, Cast déconnecté](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, connexion Cast
![Expéditeur, connexion Cast](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=19&hl=fr)
Caster l'écran d'accueil
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=19&hl=fr)
Expéditeur, Cast connecté
![Expéditeur, Cast connecté](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=19&hl=fr)
Chargement de l'application Web Receiver
![Chargement de l'application Web Receiver](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=19&hl=fr)
Expéditeur, Cast connecté
![Expéditeur, Cast connecté](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=19&hl=fr)
Application Web Receiver chargée / inactive
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=19&hl=fr)
Les images utilisées dans ce guide de conception sont fournies par la Blender Foundation. Elles sont partagées sous licence Creative Commons ou droits d'auteur.
- Le rêve d'éléphant: (c) droits d'auteur 2006, Blender Foundation / Pays-Bas 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