Mit dem Styled Media Receiver (SMR) kann Ihre Sender-App Medien auf einem Übertragungsgerät wiedergeben, ohne eine eigene benutzerdefinierte Empfänger-App erstellen zu müssen. Sie können das SMR-Farbschema und das Branding anpassen, indem Sie bei der Registrierung Ihre eigene CSS-Datei bereitstellen.
Anmeldung
Wenn Sie den SMR für Ihre App verwenden möchten, wählen Sie beim Hinzufügen einer neuen App in der Google Cast SDK Developer Console die Option Styled Media Receiver aus. Weitere Informationen finden Sie unter Registrierung. Diese Option enthält einen Link zur Vorschau des Standard-Stylesheets sowie ein Feld, in das Sie die URL zu Ihrem Stylesheet eingeben. Sie können entweder die Standardstile verwenden oder die HTTPS-URL in Ihre CSS-Datei einfügen. Sie können die CSS-Datei auf Ihrem eigenen Server hosten. Nachdem Sie die URL zu Ihrer CSS-Datei angegeben haben, können Sie auf Vorschau klicken, um zu sehen, wie Ihre Stile auf dem Empfänger aussehen.
Unterstützte Medien
Alle Empfänger unterstützen die Medientypen, wie unter Unterstützte Medien beschrieben.
Der SMR unterstützt Video, Audio und Bilder und wird von einer Senderanwendung über den Cast SDK-Medienkanal gesteuert. Der SMR entspricht vollständig den UX-Richtlinien für die Medienwiedergabe auf einem Übertragungsgerät.
Schriftarten eingeben
Eine Liste der auf dem Empfänger vorinstallierten Schriftarten finden Sie unter Vorinstallierte Schriftarten.
CSS
Der Styled Media Receiver verwendet die folgenden CSS-Klassen:
- .hintergrund: Der Hintergrund für den Empfänger.
- .logo: Das Logo, das beim Start des Empfängers angezeigt wird. Diese Klasse wird auch verwendet, wenn sich der Empfänger im inaktiven Zustand befindet und keine .splash-Klasse deklariert ist.
- .progressBar: Fortschrittsanzeige für die Medienwiedergabe.
- .splash: Bildschirm, der angezeigt wird, wenn sich der Empfänger im Ruhezustand befindet. Wenn diese Klasse nicht deklariert ist, verwendet der Empfänger standardmäßig .logo oder den Anwendungsnamen.
- Wasserzeichen: Das ist ein Wasserzeichen, das bei der Wiedergabe der Medien angezeigt wird.
Hier sehen Sie ein Beispiel für eine CSS-Datei, in der diese Klassen verwendet werden:
.background {
background: center no-repeat url(background.png);
}
.logo {
background-image: url(logo.png);
}
.progressBar {
background-color: rgb(238, 255, 65);
}
.splash {
background-image: url(splash.png);
}
.watermark {
background-image: url(watermark.png);
background-size: 57px 57px;
}
Im Folgenden finden Sie einige Beispiele für die Verwendung dieser Klassen.
Video
Hinweis: Das Videobild ist 96 × 143 Pixel groß und die erste Bildressource, die den Medienmetadaten zugeordnet ist, wird für die Anzeige ausgewählt. Bilder werden so skaliert, dass sie die erwarteten Abmessungen haben.
Audio
Hinweis: Das Audio-Albumcover ist 384 x 384 Pixel groß und die erste Bildressource, die den Medienmetadaten zugeordnet ist, wird zur Anzeige ausgewählt. Bilder werden so skaliert, dass sie die erwarteten Abmessungen haben.
Bilder von Big Buck Bunny: (c) Copyright 2008, Blender Foundation / www.bigbuckbunny.org
Bild von Sintel: (c) Copyright Blender Foundation / www.sintel.org