Der Empfänger gibt Inhalte wieder und spiegelt deren Status für den Nutzer wider. Der Empfänger muss sofort auf Aktionen in der Sender-App reagieren . Wenn zum Beispiel Inhalte auf dem Empfänger pausiert werden, wird ein Pausensymbol angezeigt. Wenn der Nutzer in der Sender-App auf „Wiedergabe“ tippt, beginnt der Empfänger mit der Wiedergabe des Inhalts und entfernt das Pausensymbol.
Beispiele für Feedback zur Benutzeroberfläche des Empfängers:
- Läuft gerade
- Pausiert
- Wiedergabeposition / Suche
- Zwischenspeichern
Empfänger-UI
Erforderlich
A Platziere die meisten UI-Elemente in der unteren Hälfte des Bildschirms und achte darauf, dass sie mit denen deiner anderen UX-Designs übereinstimmen.
B Präsentieren Sie Elemente nicht als interaktive Steuerelemente. Reproduzieren Sie beispielsweise die Absender-UI nicht auf der Empfänger-UI.
Best Practices
- Verwenden Sie Übergänge (Ausblendung), Transparenz und Nuancen, um den visuellen Effekt abzuschwächen.
- Bedenken Sie, dass die Nutzenden so viel des Inhalts wie möglich sehen möchten. Nutzer halten Inhalte häufig an, um sie zu untersuchen. Daher sollten Sie unnötige UI-Elemente nach Möglichkeit ausblenden.
Android
Absender-UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=6&hl=de)
Empfänger-UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=6&hl=de)
iOS
Absender-UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=6&hl=de)
Empfänger-UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=6&hl=de)
Chrome
Absender-UI
![Absender-UI](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.png?authuser=6&hl=de)
Empfänger-UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=6&hl=de)
Empfänger-App inaktiv
Auf dem Empfänger wird ein inaktiver Bildschirm angezeigt, wenn er mit einem Sender verbunden ist, aber keine Übertragung durchführt.
Erforderlich
A Ermitteln, welche Empfänger-App geladen wird
Best Practices
- Verwenden Sie den inaktiven Bildschirm, um Inhalte oder Funktionen der Sender-App zu bewerben.
- Ändere den Inhalt alle 30 bis 60 Sekunden, um mehr anzuzeigen und ein Überbrennen des Bildschirms zu verhindern.
- Trennen Sie die Verbindung zur Empfänger-App und beenden Sie deren Ausführung nach 5 Minuten Inaktivität. Wenn das Gerät angehalten wird, erscheint der Startbildschirm des Empfängers, um ein Einbrennen des Bildschirms zu verhindern.
Android
Dialogfeld streamen, verbunden, aber nicht gestreamt
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1.png?authuser=6&hl=de)
Receiver-App geladen / inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=6&hl=de)
iOS
Dialogfeld streamen, verbunden, aber nicht gestreamt
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1.png?authuser=6&hl=de)
Receiver-App geladen / inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=6&hl=de)
Empfänger-App wird geladen
Wenn ein Nutzer eine Verbindung zu einem Empfänger herstellt, muss diese zuerst geladen werden, bevor sie den Inaktivitätsstatus der App anzeigen oder mit der Wiedergabe von Inhalten beginnen kann.
Erforderlich
A Anhand des App-Logos ermitteln, welche Empfänger-App geladen wird
B Angeben, dass die Empfänger-App geladen wird, indem das animierte Ladesymbol angezeigt wird
Android
Sender, der eine Verbindung herstellt
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=6&hl=de)
Empfänger-App wird geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=6&hl=de)
iOS
Sender, der eine Verbindung herstellt
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=6&hl=de)
Empfänger-App wird geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=6&hl=de)
Chrome
Sender, der eine Verbindung herstellt
![Sender, der eine Verbindung herstellt](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=6&hl=de)
Empfänger-App wird geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=6&hl=de)
Inhalte des Empfängers werden geladen
Sobald die Empfänger-App geladen wurde, können die Inhalte zum Empfänger gestreamt werden.
Erforderlich
A Anhand des Inhaltstitels oder der Artwork ermitteln, welche Inhalte geladen werden
B Angeben, dass Inhalte geladen werden, indem ein animiertes Ladesymbol angezeigt wird
Best Practices
Wenn du pausierte Inhalte wieder aktivierst, solltest du die Wiedergabe 5 bis 10 Sekunden zurückspulen, damit der Zuschauer beim Übergang von Sender zu Empfänger nichts versäumt.
Android
Inhalt des Absenders wird geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements1.gif?authuser=6&hl=de)
Inhalte des Empfängers werden geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=6&hl=de)
iOS
Inhalt des Absenders wird geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements1.gif?authuser=6&hl=de)
Inhalte des Empfängers werden geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=6&hl=de)
Chrome
Inhalt des Absenders wird geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements1.gif?authuser=6&hl=de)
Inhalte des Empfängers werden geladen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=6&hl=de)
Empfängerwiedergabe
Erforderlich
A Erkennen, was beim Start des Inhalts abgespielt wird
B Wiedergabeposition ermitteln, wenn Position angepasst wird
C Angeben, dass der Empfänger Inhalte sucht,
wenn sich die Wiedergabeposition ändert, aber noch nicht abgespielt wird
Android
Sender passt Wiedergabeposition an
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=6&hl=de)
Suche nach Inhalten auf dem Empfänger
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=6&hl=de)
iOS
Sender passt Wiedergabeposition an
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=6&hl=de)
Suche nach Inhalten auf dem Empfänger
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=6&hl=de)
Chrome
Sender passt Wiedergabeposition an
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=6&hl=de)
Suche nach Inhalten auf dem Empfänger
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=6&hl=de)
Empfänger pausiert
Erforderlich
A Kennzeichnen Sie durch Anzeige eines pausierten Symbols und einer Wiedergabeposition, dass die Inhalte pausiert wurden.
B Anzuzeigen, welche Inhalte pausiert wurden, indem Sie den Titel oder das Artwork des Inhalts anzeigen
C Anhand eines App-Logos erkennen, welche Empfänger-App geladen wird
Best Practices
- Nutzer pausieren Inhalte häufig, um sie zu untersuchen. Daher werden unnötige UI-Elemente ausgeblendet, wenn sie für einige Sekunden pausiert werden, indem ein Pausensymbol angezeigt wird.
- Die Empfänger-App sollte die Wiedergabe von Inhalten nur dann fortsetzen, wenn der Nutzer explizit darum bittet, die Wiedergabe zu starten, also z. B. ein Element in der Wiedergabeliste fortzusetzen oder zu überspringen.
- Trennen Sie die Verbindung zur Empfänger-App und beenden Sie deren Ausführung nach 20 Minuten Inaktivität. Wenn das Gerät angehalten wird, erscheint der Startbildschirm des Empfängers, um ein Einbrennen des Bildschirms zu verhindern. Speichere den pausierten Ort, damit der Nutzer die Wiedergabe an diesem Punkt später fortsetzen kann.
Android
Absender pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=6&hl=de)
Receiver-Inhalte pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=6&hl=de)
Absender pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=6&hl=de)
Empfänger pausiert, nach 5 Sekunden
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=6&hl=de)
iOS
Absender pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=6&hl=de)
Receiver-Inhalte pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=6&hl=de)
Absender pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=6&hl=de)
Empfänger pausiert, nach 5 Sekunden
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=6&hl=de)
Chrome
Absender pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=6&hl=de)
Receiver-Inhalte pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=6&hl=de)
Absender pausiert
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=6&hl=de)
Empfänger pausiert, nach 5 Sekunden
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=6&hl=de)
Empfängerpufferung
Die Zwischenspeicherung erfolgt beim Empfänger, wenn Netzwerklatenz oder andere Faktoren zu einer Verzögerung bei der Wiedergabe führen.
Erforderlich
A Geben Sie an, dass der Empfänger nach einigen Sekunden eine Zwischenspeicherung ausführt. Dazu wird ein rotierendes Ladesymbol angezeigt. Wenn Sie einige Sekunden auf die Pufferung warten, wird das rotierende Ladesymbol unter schlechten Netzwerkbedingungen nicht zu häufig angezeigt.
Best Practices
Ermitteln Sie, welcher Inhalt zwischengespeichert wird, wenn die Zwischenspeicherung nach 5 Sekunden fortgesetzt wird.
Android
Sender gibt Empfängerpufferung an
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=6&hl=de)
Zwischenspeichern von Empfängerinhalten
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=6&hl=de)
iOS
Sender gibt Empfängerpufferung an
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=6&hl=de)
Zwischenspeichern von Empfängerinhalten
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=6&hl=de)
Chrome
Sender gibt Empfängerpufferung an
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=6&hl=de)
Zwischenspeichern von Empfängerinhalten
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=6&hl=de)
Empfänger beendet das Streaming
Wenn die Wiedergabe beendet oder eine Zeitüberschreitung auftritt, sollten in der Benutzeroberfläche des Empfängers andere Inhalte oder Funktionen beworben werden, die in der Sender-App verfügbar sind.
Erforderlich
A Anhand des App-Logos können Sie ermitteln, welche Empfänger-App geladen oder inaktiv ist.
Best Practices
- Nach der Wiedergabe auf dem inaktiven Bildschirm Inhalte oder Funktionen der Sender-App empfehlen, basierend auf den gerade gestreamten Inhalten
- Den Inhalt des inaktiven Bildschirms alle 30 bis 60 Sekunden ändern, um ein Einbrennen des Bildschirms zu verhindern
- Trennen Sie die Verbindung zur Empfänger-App und beenden Sie deren Ausführung nach 5 Minuten Inaktivität. Wenn das Gerät angehalten wird, erscheint der Startbildschirm des Empfängers, um ein Einbrennen des Bildschirms zu verhindern.
Android
Sender-App inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=6&hl=de)
Receiver-App inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=6&hl=de)
Absenderverbindung getrennt
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states2.png?authuser=6&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=6&hl=de)
iOS
Sender-App inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=6&hl=de)
Receiver-App inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=6&hl=de)
Absenderverbindung getrennt
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2.png?authuser=6&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=6&hl=de)
Chrome
Sender-App inaktiv
![Sender-App inaktiv](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=6&hl=de)
Receiver-App inaktiv
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=6&hl=de)
Absenderverbindung getrennt
![Absenderverbindung getrennt](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2.png?authuser=6&hl=de)
Startbildschirm streamen
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=6&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