Mit Styled Receiver (SMR) kann die Absenderanwendung Medien auf einem Übertragungsgerät wiedergeben, ohne dass Sie dazu eine eigene benutzerdefinierte Empfängeranwendung erstellen müssen. Sie können das SMR-Farbschema und das Branding anpassen, indem Sie während der Registrierung Ihre eigene CSS-Datei bereitstellen.
Anmeldung
Wenn Sie den SMR für Ihre Anwendung verwenden möchten, wählen Sie beim Hinzufügen einer neuen Anwendung 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 zur Eingabe der URL zu Ihrem Stylesheet. Sie können entweder die Standardstile verwenden oder die HTTPS-URL der CSS-Datei angeben. Sie können die CSS-Datei auch mit 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.
Das SMR unterstützt Video-, Audio- und Bilddaten und wird über eine Anwendung des Absenders über den Cast SDK-Medienkanal gesteuert. Der SMR entspricht vollständig den UX-Richtlinien für die Medienwiedergabe auf einem Cast-Gerä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:
- .background: Der Hintergrund für den Empfänger.
- .logo: Das Logo, das beim Start des Empfängers angezeigt wird. Diese Klasse wird auch verwendet, wenn der Empfänger inaktiv ist und keine .splash-Klasse deklariert ist.
- .progressBar: Fortschrittsanzeige für die Medienwiedergabe
- .splash: Bildschirm, der angezeigt wird, wenn der Empfänger inaktiv ist Wenn diese Klasse nicht deklariert ist, wird der Empfänger standardmäßig auf .logo oder den Anwendungsnamen gesetzt.
- Wasserzeichen: Ein Wasserzeichen, das angezeigt wird, wenn Medien abgespielt werden.
Hier ist eine CSS-Beispieldatei, die diese Klassen verwendet:
.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.
Videokampagnen
Hinweis: Das Videobildmotiv ist 96 x 143 Pixel groß. Die erste mit den Medienmetadaten verknüpfte Bildressource wird für die Anzeige ausgewählt. Bilder werden gemäß den erwarteten Abmessungen skaliert.
Audio
Hinweis: Das Audioalbumcover ist 384 x 384 Pixel groß und die erste mit den Medienmetadaten verknüpfte Bildressource wird für die Anzeige ausgewählt. Bilder werden gemäß den erwarteten Abmessungen skaliert.
Bilder von Big Buck Bunny: (c) Copyright 2008, Blender Foundation / www.bigbuckbunny.org
Bild von Sintel: (c) copyright Blender Foundation / www.sintel.org