Das Web Receiver SDK bietet eine integrierte Player-Benutzeroberfläche. Um diese UI in Ihrer benutzerdefinierten Web Receiver-Anwendung zu implementieren, müssen Sie dem Text der HTML-Datei das Element cast-media-player
hinzufügen.
<body>
<cast-media-player></cast-media-player>
</body>
Mit CSS-Variablen können Sie verschiedene cast-media-player
-Eigenschaften anpassen, darunter den Playerhintergrund, das Splash-Bild, die Schriftfamilie und mehr. Sie können diese Variablen mit Inline-CSS-Stilen, einem CSS-Stylesheet oder dem style.setProperty
in JavaScript hinzufügen.
In den nächsten Abschnitten erfahren Sie, wie Sie die einzelnen Bereiche des Mediaplayer-Elements anpassen. Die folgenden Vorlagen erleichtern Ihnen den Einstieg.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/receiver.css" media="screen" /> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> </body> <footer> <script src="js/receiver.js"></script> </footer> </html>
js/receiver.js
const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start();
css/receiver.css
body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); --splash-size: cover; }
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> <style> body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); } </style> <script> const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start(); </script> </body> </html>
Logo für Wiedergabe
Das Wiedergabelogo wird während der Medienwiedergabe oben links auf dem Receiver angezeigt. Dieses Attribut ist von der Klasse .logo
getrennt. Sie können --playback-logo-image
über die body
-Auswahl anpassen.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Hintergrundeigenschaften des Players
Mit --background
-Variablen werden die Hintergrundeigenschaften des gesamten Players festgelegt, die beim Start und der Wiedergabe sichtbar sind. Sie können beispielsweise für den gesamten Hintergrund einen linearen Farbverlauf von weiß und silber festlegen:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Anzeige des Web-Receivers:
Mit den folgenden Variablen können Sie .background
-Attribute anpassen:
Variablen und Standardwerte
Name | Standardwert | Beschreibung |
---|---|---|
--hintergrund | Schwarz | CSS-Hintergrundeigenschaft |
--background-color | CSS-Eigenschaft „Hintergrundfarbe“ | |
--background-image | CSS-Eigenschaft „Hintergrundbild“ | |
--background-repeat | nicht wiederholen | CSS-Eigenschaft „Hintergrund-Wiederholung“ |
--background-size | Coverversion | CSS-Eigenschaft für die Hintergrundgröße |
CSS-Vorlage
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Logoeigenschaften
Die Klasse .logo
wird vor der Klasse .background
positioniert und erstreckt sich über den gesamten Player. Diese Klasse wird angezeigt, wenn dein Receiver gestartet wird. Wenn Sie keine .splash
-Variablen angeben, wird die Klasse .logo
auch angezeigt, wenn sich der Empfänger im Ruhezustand befindet.
Im folgenden Beispiel wird für --logo-image
ein Equalizer-Symbol mit dem Namen welcome.png
festgelegt. Ein Bild befindet sich standardmäßig in der Mitte des Empfängers:
cast-media-player {
--logo-image: url('welcome.png');
}
Anzeige des Web-Receivers:
Mit den folgenden Variablen können Sie .logo
-Attribute anpassen:
Variablen und Standardwerte
Name | Standardwert | Beschreibung |
---|---|---|
--logo-background | CSS-Hintergrundeigenschaft | |
--logo-color | CSS-Eigenschaft „Hintergrundfarbe“ | |
--logo-image | CSS-Eigenschaft „Hintergrundbild“ | |
--logo-repeat | nicht wiederholen | CSS-Eigenschaft „Hintergrund-Wiederholung“ |
--logo-size | CSS-Eigenschaft für die Hintergrundgröße |
CSS-Vorlage
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Eigenschaften des Splash
Ähnlich wie die .logo
-Klasse umfasst die Klasse .splash
den gesamten Player. Wenn Sie diese Attribute festlegen, überschreiben Ihre .splash
-Variablen die .logo
-Variablen, wenn der Empfänger inaktiv ist. Das bedeutet, dass Sie beim Start einen Satz von .logo
-Eigenschaften verwenden und separate Hintergründe oder Bilder anzeigen können, wenn der Empfänger inaktiv ist.
Sie können beispielsweise den weißen und silbernen Farbverlaufshintergrund mit dimgray
überschreiben und ein animiertes Warten...-Symbol hinzufügen:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Anzeige des Web-Receivers:
Wenn Sie diese Attribute nicht festlegen, verwendet der Empfänger bei Inaktivität standardmäßig Ihre .logo
-Einstellungen oder den Anwendungsnamen.
Mit den folgenden Variablen können Sie .splash
-Attribute anpassen:
Variablen und Standardwerte
Name | Standardwert | Beschreibung |
---|---|---|
--splash-background | CSS-Hintergrundeigenschaft | |
--splash-color | CSS-Eigenschaft „Hintergrundfarbe“ | |
--splash-image | CSS-Eigenschaft „Hintergrundbild“ | |
--splash-repeat | CSS-Eigenschaft „Hintergrund-Wiederholung“ | |
--splash-size | CSS-Eigenschaft für die Hintergrundgröße |
CSS-Vorlage
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Präsentationsmodus
Wenn im Ruhezustand bis zu 10 Bilder anstelle des Splash-Images wiedergegeben werden sollen, verwenden Sie die folgenden Diashow-Parameter.
Variablen und Standardwerte
Name | Standardwert | Beschreibung |
---|---|---|
--slideshow-interval-duration | 10 s | Zeit zwischen Bildern. |
--slideshow-animation-duration | 2s | Dauer des Übergangs. |
--slideshow-image-1 | Erstes Bild in der Diashow | |
--slideshow-image-2 | Zweites Bild in der Diashow | |
--slideshow-image-3 | Drittes Bild in der Diashow | |
--slideshow-image-4 | Viertes Bild in der Diashow | |
--slideshow-image-5 | Fünftes Bild in der Diashow | |
--slideshow-image-6 | Sechstes Bild in der Diashow. | |
--slideshow-image-7 | Siebtes Bild in der Diashow. | |
--slideshow-image-8 | Acht Bild in der Diashow. | |
--slideshow-image-9 | Neuntes Bild in der Diashow. | |
--slideshow-image-10 | Zehntes Bild in der Diashow |
CSS-Vorlage
cast-media-player {
--slideshow-interval-duration:
--slideshow-animation-duration:
--slideshow-image-1:
--slideshow-image-2:
--slideshow-image-3:
--slideshow-image-4:
--slideshow-image-5:
--slideshow-image-6:
--slideshow-image-7:
--slideshow-image-8:
--slideshow-image-9:
--slideshow-image-10:
}
Wasserzeicheneigenschaften
Während der Medienwiedergabe wird ein .watermark
angezeigt. Dies ist normalerweise ein kleines, transparentes Bild, das sich standardmäßig unten rechts auf dem Empfänger befindet.
Mit den folgenden Variablen können Sie .watermark
-Attribute anpassen:
Variablen und Standardwerte
Name | Standardwert | Beschreibung |
---|---|---|
--watermark-background | CSS-Hintergrundeigenschaft | |
--watermark-color | CSS-Eigenschaft „Hintergrundfarbe“ | |
--watermark-image | CSS-Eigenschaft „Hintergrundbild“ | |
--watermark-position | rechts unten | CSS-Eigenschaft „Hintergrundposition“ |
--watermark-repeat | nicht wiederholen | CSS-Eigenschaft „Hintergrund-Wiederholung“ |
--watermark-size | CSS-Eigenschaft für die Hintergrundgröße |
CSS-Vorlage
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Wiedergabe, Anzeigen und andere CSS-Eigenschaften
Über die cast-media-player
-Auswahl kannst du auch Anzeigen, Schriftarten, Playerbilder und andere Eigenschaften anpassen.
Variablen und Standardwerte
Name | Standardwert | Beschreibung |
---|---|---|
--ad-title | Werbeunterbrechung | Der Titel der Anzeige. |
--skip-ad-title | Überspringen | Text des Textfelds Anzeige überspringen. |
--break-color | hsl(Farbton; 100 %; 50%) | Farbe des Zeichens für die Werbeunterbrechung. |
--font-family | Open Sans | Schriftfamilie für Metadaten und die Fortschrittsanzeige. |
--spinner-image | Standardbild | Das Bild, das beim Starten angezeigt wird. |
--buffering-image | Standardbild | Das Bild, das während der Zwischenspeicherung angezeigt werden soll. |
--pause-image | Standardbild | Das Bild, das im pausierten Zustand angezeigt werden soll. |
--play-image | Das Bild, das während der Wiedergabe in den Metadaten angezeigt wird. | |
--theme-hue | 42 | Der für den Player zu verwendende hue-Farbton. |
--progress-color | hsl(Farbton; 95 %; 60%) | Farbe für Fortschrittsanzeige. |
CSS-Vorlage
cast-media-player {
--ad-title:
--skip-ad-title:
--break-color:
--font-family:
--spinner-image:
--buffering-image:
--pause-image:
--play-image:
--theme-hue:
--progress-color:
}
Weitere Informationen und zusätzliche Abbildungen finden Sie unter Styled Media Receiver.
Overscan
Für TV-Layouts gelten spezielle Anforderungen, da die TV-Standards weiterentwickelt werden und den Zuschauern immer ein Vollbildbild präsentiert wird. Fernsehgeräte können den äußeren Rand eines App-Layouts beschneiden, damit der gesamte Bildschirm ausgefüllt ist. Dieses Verhalten wird im Allgemeinen als Overscan bezeichnet. Binden Sie auf allen Seiten Ihres Layouts einen Rand von 10 % ein, um zu vermeiden, dass Bildschirmelemente durch Overscan abgeschnitten werden.
Standard-Audio-UI
MetadataType.MUSIC_TRACK
A: --logo-image
B. MusicTrackMediaMetadata.albumName
C) MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
oder MusicTrackMediaMetadata.composer
E) MusicTrackMediaMetadata.images[0]
H. Wiedergabe/Pause
Benutzerdefinierte UI-Datenbindung
Das Cast Web Receiver SDK unterstützt die Verwendung deines eigenen benutzerdefinierten UI-Elements anstelle von cast-media-player
.
Mit der benutzerdefinierten UI-Datenbindung kannst du dein eigenes benutzerdefiniertes UI-Element und die Klasse PlayerDataBinder
verwenden, um die UI an den Player-Status zu binden, anstatt das cast-media-player
-Element zum Empfänger hinzuzufügen. Das Binder unterstützt auch das Senden von Ereignissen für Datenänderungen, wenn die Anwendung die Datenbindung nicht unterstützt.
const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();
const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
// Update ui according to player state
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
e => {
switch (e.value) {
case cast.framework.ui.State.LAUNCHING:
case cast.framework.ui.State.IDLE:
// Write your own event handling code
break;
case cast.framework.ui.State.LOADING:
// Write your own event handling code
break;
case cast.framework.ui.State.BUFFERING:
// Write your own event handling code
break;
case cast.framework.ui.State.PAUSED:
// Write your own event handling code
break;
case cast.framework.ui.State.PLAYING:
// Write your own event handling code
break;
}
});
context.start();
Sie sollten dem HTML-Code mindestens einen MediaElement
hinzufügen, damit er vom Webempfänger verwendet werden kann. Wenn mehrere MediaElement
-Objekte verfügbar sind, solltest du das MediaElement
-Objekt taggen, das der Webempfänger verwenden soll. Fügen Sie dazu castMediaElement
in die Klassenliste des Videos ein, wie unten gezeigt. Andernfalls wählt der Web Receiver die erste MediaElement
aus.
<video class="castMediaElement"></video>