Receiver mit benutzerdefinierten Stilen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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