Über das Cast-Symbol wird ein Dialogfeld geöffnet, über das Sie eine Verbindung zu Webempfängern herstellen, steuern und trennen können.
Unter Streaming-Symbole können Sie die Vorlagen für das Cast-Symbol herunterladen.
Das Cast-Symbol ist nicht spezifisch für Google Cast. Es kann sowohl für Web- als auch für Nicht-Web-Receiver (z. B. Bluetooth-Headsets) verwendet werden. Web Receiver sollten immer im Dialogfeld „Streamen“ und nie in einem anderen Dialogfeld, Menüs oder Steuerelement angezeigt werden.
Nutzern Google Cast vorstellen
Durch die Einführung des Cast-Symbols wissen vorhandene Nutzer, dass die Sender-App jetzt Streaming unterstützt, und hilft Nutzern, die neu bei Google Cast sind.
Erforderlich
A Zeige den Cast-Einführungsbildschirm an, wenn
Web Receiver zum ersten Mal verfügbar sind. iOS-Absender: Wenn das Cast-Symbol zum ersten Mal angezeigt wird, sollte der Einführungsbildschirm angezeigt werden.
B Um das Cast-Symbol zu markieren, kreise es
C Erkläre, wie das Cast-Symbol funktioniert (z. B. durch Anzeige einer Meldung wie „Durch Tippen auf den Fernseher streamen“).
Android
Vorstellung des Streams
![Vorstellung des Streams](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/prompting1_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
iOS
Vorstellung des Streams
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/prompting1_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Chrome
Vorstellung des Streams
![Vorstellung des Streams](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/prompting1_a.png?authuser=5&hl=de)
Startbildschirm streamen
![Startbildschirm streamen](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Verfügbarkeit des Cast-Symbols
Erforderlich
A Das Cast-Symbol muss auf jedem Bildschirm mit abspielbaren Inhalten sichtbar sein. Außerdem muss es sich beim Surfen oder Abspielen von Inhalten an derselben Position befinden. Sie wird zur globalen Steuerung auch in der Kopfzeile von Chrome angezeigt.
B In Chrome kann das Cast-Symbol ausgeblendet werden, wenn keine Webempfänger verfügbar sind. Für Android- und iOS-Absender sollte das Cast-Symbol immer angezeigt werden, wenn das Gerät mit einem WLAN verbunden ist. So kann die richtige Hilfe gegeben werden, wenn der Nutzer den Zugriff auf das lokale Netzwerk deaktiviert hat und Geräte deswegen nicht sichtbar sind. 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 auf der rechten Seite der inhaltsbezogenen Mediensteuerelemente befinden, z. B. im eingebetteten Video. Wenn die Mediensteuerung eine Vollbildschaltfläche enthält, platziere das Cast-Symbol links daneben.
Hinweis
Google Cast nutzt ein Multitasking-Modell, mit dem Nutzer während des Streamings die Sender-App und andere Apps durchsuchen können. Das Cast-Symbol muss auf jedem Bildschirm mit abspielbaren Inhalten sichtbar sein. Nutzer müssen also nicht erst suchen, wo sie die Wiedergabe von Inhalten auf dem Fernseher anhalten oder beenden können.
Android
Absenderverbindung getrennt
![Absenderverbindung getrennt](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
iOS
Absenderverbindung getrennt
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Chrome
Absenderverbindung getrennt
![Absenderverbindung getrennt](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Status von Cast-Schaltflächen
Erforderlich
A Nicht verbunden: Wenn Web-Receiver verfügbar sind, wird das Cast-Symbol angezeigt.
B Verbinden: Wenn der Web Receiver verbunden wird, animiert
das Cast-Symbol die Wellen im Symbol schrittweise (weitere Informationen finden Sie siehe Hinweis unten)
C Verbunden: Wenn diese App mit einem Cast-fähigen Webempfänger verbunden ist,
Best Practices
Verwende für jeden Schaltflächenstatus Farben, die dem Stil der anderen UI-Elemente deiner App entsprechen. Die Verwendung einer eigenen Hervorhebungsfarbe (z. B. Gelb) für den Status „AN“ oder „Verbunden“ ist optional.
Notes
- Das Cast-Symbol wird in Chrome, Android und iOS angezeigt, damit unabhängig von der Verfügbarkeit von Übertragungsgeräten auf die Cast-Erweiterung zugegriffen werden kann.
- Der Status „Verbindung wird (animiert)“ wird angezeigt, wenn die Verbindung zur Cast API länger als erwartet dauert. In den Android- und Chrome-SDKs wird das Cast-Symbol automatisch animiert. Sobald die Verbindung hergestellt ist, wird die Web Receiver App gestartet.
- Der Status „AN“ oder „Verbunden“ des Cast-Symbols wurde aktualisiert und der Symbolrahmen ist jetzt ausgefüllt. Die neuen Cast-Symbol- und Symbolvorlagen finden Sie hier.
Android
Sender, Streaming nicht verbunden
![Sender, Streaming nicht verbunden](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=5&hl=de)
Startbildschirm streamen
![Startbildschirm streamen](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streamingverbindung wird hergestellt
![Sender, Streamingverbindung wird hergestellt](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=5&hl=de)
Startbildschirm streamen
![Startbildschirm streamen](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streaming verbunden
![Sender, Streaming verbunden](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=5&hl=de)
Web Receiver App wird geladen
![Web Receiver App wird geladen](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=5&hl=de)
Sender, Streaming verbunden
![Sender, Streaming verbunden](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=5&hl=de)
Web Receiver App geladen / inaktiv
![Web Receiver App geladen / inaktiv](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=de)
iOS
Sender, Streaming nicht verfügbar
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streaming nicht verbunden
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streamingverbindung wird hergestellt
![Sender, Streamingverbindung wird hergestellt](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streaming verbunden
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=5&hl=de)
Web Receiver App wird geladen
![Web Receiver App wird geladen](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=5&hl=de)
Sender, Streaming verbunden
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=5&hl=de)
Web Receiver App geladen / inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=de)
Chrome
Sender, Streaming nicht verfügbar
![Sender, Streaming nicht verfügbar](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=5&hl=de)
Das Cast-Symbol wird in Chrome angezeigt, um unabhängig vom Verbindungsstatus Zugriff auf die Cast-Erweiterung zu ermöglichen.
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streaming nicht verbunden
![Sender, Streaming nicht verbunden](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streamingverbindung wird hergestellt
![Sender, Streamingverbindung wird hergestellt](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=5&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=de)
Sender, Streaming verbunden
![Sender, Streaming verbunden](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=5&hl=de)
Web Receiver App wird geladen
![Web Receiver App wird geladen](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=5&hl=de)
Sender, Streaming verbunden
![Sender, Streaming verbunden](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=5&hl=de)
Web Receiver App geladen / inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=de)
In diesem Designleitfaden verwendete Bilder wurden mit freundlicher Genehmigung der Blender Foundation bereitgestellt und unter Copyright-Lizenz oder Creative Commons-Lizenz geteilt.
- Elefant's Dream: (c) Copyright 2006, Blender Foundation / Niederländisch 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