Cast-Symbol

Über das Cast-Symbol wird ein Dialogfeld geöffnet, in dem Sie eine Verbindung zu Web-Empfängern herstellen, diese steuern und die Verbindung trennen können.

Unter Cast-Symbole können Sie die Vorlagen für das Cast-Symbol 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-Empfänger sollten immer im Cast-Dialogfeld und nie in einem anderen Dialogfeld, Menü oder Steuerelement angezeigt werden.

  Cast-Funktion vorstellen

Wenn Sie das Cast-Symbol vorstellen, erfahren bestehende Nutzer, dass die Sender-App jetzt das Streamen unterstützt. Außerdem hilft es Nutzern, die Google Cast noch nicht kennen.

Erforderlich
  A   Zeigen Sie beim ersten Mal, wenn Web-Empfänger verfügbar sind, einen Einführungsbildschirm für die Cast-Funktion an. Bei iOS-Sendern wird beim ersten Erscheinen des Cast-Symbols ein Einführungsbildschirm für die Cast-Funktion angezeigt.
  B   Heben Sie das Cast-Symbol visuell hervor, indem Sie es einkreisen.
  C   Erklären Sie, wie das Cast-Symbol funktioniert (z. B. durch eine Nachricht wie „Tippen Sie hier, um Videos auf Ihren Fernseher zu streamen“).

Android

Einführung in die Cast-Funktion

Einführung in Google Cast

Cast-Startbildschirm

iOS

Einführung in die Cast-Funktion

Cast-Startbildschirm

Chrome

Einführung in die Cast-Funktion

Einführung in Google Cast

Cast-Startbildschirm

Startbildschirm streamen
 

  Verfügbarkeit des Cast-Symbols

Erforderlich
  A   Das Cast-Symbol muss auf jedem Bildschirm mit abspielbaren Inhalten sichtbar sein und sich beim Browsen oder Abspielen von Inhalten an einer konsistenten Position befinden. Außerdem wird es in der Kopfzeile von Chrome für die globale Steuerung angezeigt.
  B  In Chrome kann das Cast-Symbol ausgeblendet werden, wenn keine Web-Empfänger verfügbar sind. Bei Android- und iOS-Sendern sollte das Cast-Symbol immer angezeigt werden, wenn das Gerät mit einem WLAN verbunden ist. So kann dem Nutzer die richtige Hilfe gegeben werden, 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 das Cast-Symbol auf der rechten Seite des Bildschirms oder in einer Playeransicht angezeigt werden. Wenn es in einer Playeransicht angezeigt wird, platzieren Sie es oben rechts.
  D   In Chrome sollte sich das Cast-Symbol rechts in den Mediensteuerelementen für Inhalte befinden (siehe z. B. eingebettetes Video). Wenn die Mediensteuerelemente eine Schaltfläche für den Vollbildmodus enthalten, platzieren Sie das Cast-Symbol links davon.

Hinweis

Google Cast verwendet ein Multitasking-Modell, mit dem Nutzer während des Streamens in der Sender-App und anderen Apps browsen können. Das Cast-Symbol 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

Sender getrennt

Absender getrennt

Cast-Startbildschirm

iOS

Sender getrennt

Cast-Startbildschirm

Chrome

Sender getrennt

Absender getrennt

Cast-Startbildschirm

 

  Status des Cast-Symbols

Erforderlich
A Getrennt: Wenn Web-Empfänger verfügbar sind, wird das Cast-Symbol angezeigt.
B Verbindung wird hergestellt: Wenn die Verbindung zum Web-Empfänger hergestellt wird, werden die Wellen im Cast-Symbol animiert (weitere Informationen finden Sie im Hinweis unten).
C Verbunden: Wenn diese App mit dem Cast Web-Empfänger verbunden ist, wird das Cast-Symbol mit einer gefüllten Rahmenform angezeigt.

Best Practices
Verwenden Sie für jeden Status des Symbols Farben, die zum Stil der anderen UI Elemente Ihrer App passen. Die Verwendung einer bestimmten 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 WLAN oder Übertragungsgeräten Zugriff auf die Cast-Erweiterung zu ermöglichen.
  • Der Status „Verbindung wird hergestellt“ (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-Empfänger-App gestartet.
  • Der Status „EIN“ / „Verbunden“ des Cast-Symbols wurde aktualisiert und verwendet jetzt eine durchgehende Füllung innerhalb des Symbolrahmens. Das neue Cast-Symbol und die Symbolvorlagen sind hier verfügbar.

Android

Sender, Cast getrennt

Absender, Cast getrennt

Cast-Startbildschirm

Startbildschirm streamen

Sender, Cast Verbindung wird hergestellt

Absender, Streamen – wird verbunden

Cast-Startbildschirm

Startbildschirm streamen

Sender, Cast verbunden

Absender, Streamen – verbunden

Web-Empfänger-App wird geladen

Laden der Web Receiver-App

Sender, Cast verbunden

Absender, Streamen – verbunden

Web-Empfänger-App geladen / inaktiv

Web Receiver-App geladen / inaktiv

iOS

Sender, Cast nicht verfügbar

Cast-Startbildschirm

Sender, Cast getrennt

Cast-Startbildschirm

Sender, Cast Verbindung wird hergestellt

Absender, Streamen – wird verbunden

Cast-Startbildschirm

Sender, Cast verbunden

Web-Empfänger-App wird geladen

Laden der Web Receiver-App

Sender, Cast verbunden

Web-Empfänger-App geladen / inaktiv

Chrome

Sender, Cast nicht verfügbar

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.

Cast-Startbildschirm

Sender, Cast getrennt

Absender, Cast getrennt

Cast-Startbildschirm

Sender, Cast Verbindung wird hergestellt

Absender, Streamen – wird verbunden

Cast-Startbildschirm

Sender, Cast verbunden

Absender, Streamen – verbunden

Web-Empfänger-App wird geladen

Laden der Web Receiver-App

Sender, Cast verbunden

Absender, Streamen – verbunden

Web-Empfänger-App geladen / inaktiv

 

 

Die in diesem Designleitfaden verwendeten Bilder stammen von der Blender Foundation und werden unter einer Urheberrechts- oder Creative Commons-Lizenz geteilt.

  • 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