Cast-Symbol
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Über das Cast-Symbol wird ein Dialogfeld geöffnet, in dem Sie eine Verbindung zu Web-Receivern herstellen, sie steuern und die Verbindung trennen können.
Unter Cast-Symbole können Sie die Vorlagen für die Cast-Schaltfläche herunterladen.
Das Cast-Symbol ist nicht spezifisch für Google Cast, sondern kann sowohl für Web- als auch für Nicht-Web-Empfänger (z. B. Bluetooth-Headsets) verwendet werden. Web-Receiver sollten immer im Cast-Dialogfeld und nie in einem anderen Dialogfeld, Menü oder Steuerelement angezeigt werden.
Das Cast-Symbol informiert bestehende Nutzer darüber, dass die Sender-App jetzt Casting unterstützt. Außerdem hilft es Nutzern, die Google Cast noch nicht kennen.
Erforderlich
A Beim ersten Mal, wenn Web Receiver verfügbar sind, wird ein Einführungsbildschirm für Google Cast angezeigt. Bei iOS-Absendern sollte beim ersten Erscheinen des Cast-Symbols ein Einführungsbildschirm für Google Cast angezeigt werden.
B Heben Sie die Cast-Schaltfläche visuell hervor, indem Sie sie einkreisen.
C Erläutern Sie die Funktionsweise der Cast-Schaltfläche, z. B. durch eine Meldung wie „Tippen, um Videos auf deinen Fernseher zu streamen“.
Android
Einführung in Google Cast
Startbildschirm streamen
iOS
Einführung in Google Cast
Startbildschirm streamen
Chrome
Einführung in Google Cast
Startbildschirm streamen
Erforderlich
A Die Cast-Schaltfläche muss auf jedem Bildschirm mit abspielbaren Inhalten sichtbar sein und sich beim Browsen oder Abspielen von Inhalten an einer einheitlichen Position befinden. Sie wird auch im Header von Chrome für die globale Steuerung angezeigt.
B In Chrome kann das Cast-Symbol ausgeblendet werden, wenn keine Web Receiver verfügbar sind. Bei Android- und iOS-Absendern sollte die Cast-Schaltfläche immer angezeigt werden, wenn das Gerät mit einem WLAN verbunden ist. So kann der Nutzer bei Problemen besser unterstützt werden, z. B. wenn er den Zugriff auf das lokale Netzwerk deaktiviert hat und Geräte dadurch nicht mehr erkannt werden (weitere Informationen finden Sie unter iOS-Berechtigungen und ‑Erkennung).
C In mobilen Apps sollte sich das Cast-Symbol auf der rechten Seite befinden.
D In Chrome sollte sich das Cast-Symbol rechts in den Mediensteuerelementen für Inhalte befinden (siehe eingebettetes Video). Wenn die Media-Steuerelemente eine Vollbildschaltfläche enthalten, platzieren Sie die Schaltfläche „Streamen“ links davon.
Hinweis
Google Cast verwendet ein Multitasking-Modell, mit dem Nutzer während des Castings in der Sender-App und anderen Apps surfen können. Die Cast-Schaltfläche muss auf jedem Bildschirm mit abspielbaren Inhalten sichtbar sein, damit der Nutzer nicht lange suchen muss, um die Wiedergabe von Inhalten auf dem Fernseher zu pausieren oder zu beenden.
Android
Absender getrennt
Startbildschirm streamen
iOS
Absender getrennt
Startbildschirm streamen
Chrome
Absender getrennt
Startbildschirm streamen
Erforderlich
A Getrennt: Wenn Web Receiver verfügbar sind, wird die Cast-Schaltfläche angezeigt.
B Verbinden: Wenn der Web Receiver eine Verbindung herstellt, werden die Wellen im Symbol der Cast-Schaltfläche nach und nach animiert (weitere Informationen finden Sie im Hinweis unten).
C Verbunden: Wenn diese App mit dem Cast Web Receiver verbunden ist, wird die Cast-Schaltfläche mit einer gefüllten Rahmenform angezeigt.
Best Practices
Verwenden Sie für die einzelnen Schaltflächenstatus Farben, die zum Stil anderer UI-Elemente Ihrer App passen. Die Verwendung einer deutlichen Hervorhebungsfarbe (z. B. Gelb) für den Status „EIN“ / „Verbunden“ ist optional.
Hinweise
- Das Cast-Symbol wird in Chrome, Android und iOS angezeigt, um unabhängig von der Verfügbarkeit von Cast-Geräten Zugriff auf die Cast-Erweiterung zu ermöglichen.
- Der Status „Wird verbunden“ (animiert) wird angezeigt, wenn die Verbindung zur Cast API länger als erwartet dauert. Das Cast-Symbol wird im Android- und Chrome-SDK automatisch animiert. Sobald die Verbindung hergestellt ist, wird die Web Receiver-App gestartet.
- Der Status „AN / Verbunden“ des Cast-Symbols wurde aktualisiert. Das Symbol ist jetzt vollständig ausgefüllt. Das neue Cast-Symbol und die Symbolvorlagen sind
hier verfügbar.
Android
Absender, Cast-Verbindung getrennt
Startbildschirm streamen
Absender, Streamen – wird verbunden
Startbildschirm streamen
Absender, Streamen – verbunden
Laden der Web Receiver-App
Absender, Streamen – verbunden
Web Receiver-App geladen / im Leerlauf
iOS
Absender, Cast nicht verfügbar
Startbildschirm streamen
Absender, Cast-Verbindung getrennt
Startbildschirm streamen
Absender, Streamen – wird verbunden
Startbildschirm streamen
Absender, Streamen – verbunden
Laden der Web Receiver-App
Absender, Streamen – verbunden
Web Receiver-App geladen / im Leerlauf
Chrome
Absender, Cast nicht verfügbar
Das Cast-Symbol wird in Chrome angezeigt, um unabhängig vom Verbindungsstatus Zugriff auf die Cast-Erweiterung zu ermöglichen.
Startbildschirm streamen
Absender, Cast-Verbindung getrennt
Startbildschirm streamen
Absender, Streamen – wird verbunden
Startbildschirm streamen
Absender, Streamen – verbunden
Laden der Web Receiver-App
Absender, Streamen – verbunden
Web Receiver-App geladen / im Leerlauf
Die in diesem Designleitfaden verwendeten Bilder wurden von der Blender Foundation zur Verfügung gestellt und unterliegen dem Urheberrecht oder einer Creative Commons-Lizenz.
- 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
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-07-26 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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"]]
