Das Web Receiver SDK bietet eine integrierte Player-Benutzeroberfläche. Wenn Sie diese Benutzeroberfläche in Ihre benutzerdefinierte Web Receiver-App einfügen möchten, müssen Sie das cast-media-player-Element in den Body Ihrer HTML-Datei einfügen.
<body>
<cast-media-player></cast-media-player>
</body>
Mit CSS-Variablen können Sie verschiedene cast-media-player-Eigenschaften anpassen, darunter den Player-Hintergrund, das Splash-Bild und die Schriftfamilie. 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 Media Player-Elements anpassen. Die folgenden Vorlagen können Ihnen den Einstieg erleichtern.
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>Wiedergabelogo
Das Wiedergabelogo wird während der Medienwiedergabe oben links auf dem Empfänger angezeigt. Diese Eigenschaft ist von der Klasse .logo getrennt. Sie können --playback-logo-image über die Auswahl body anpassen.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Hintergrundeigenschaften des Players
Mit --background-Variablen werden die Hintergrundattribute des gesamten Players festgelegt, die beim Start und bei der Wiedergabe sichtbar sind. Sie können beispielsweise den gesamten Hintergrund auf einen weißen und silbernen linearen Farbverlauf festlegen:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Web Receiver-Display:
Sie können die folgenden Variablen verwenden, um .background-Attribute anzupassen:
Variablen und Standardwerte
| Name | Standardwert | Beschreibung |
|---|---|---|
| --background | Schwarz | CSS-Property „background“ |
| --background-color | CSS-Property „background-color“ | |
| --background-image | CSS-Property „background-image“ | |
| --background-repeat | no-repeat | CSS-Eigenschaft „background-repeat“ |
| --background-size | Coverversion | CSS-Property „background-size“ |
CSS-Vorlage
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Logo-Eigenschaften
Die Klasse .logo wird vor der Klasse .background positioniert und umfasst den gesamten Player. In dieser Klasse wird angezeigt, wann dein Receiver gestartet wird. Wenn Sie keine .splash-Variablen angeben, wird die .logo-Klasse auch angezeigt, wenn sich Ihr Empfänger im Leerlauf befindet.
Im folgenden Beispiel wird --logo-image auf ein Equalizer-Symbol mit dem Namen welcome.png festgelegt. Ein Bild wird standardmäßig in der Mitte des Empfängers angezeigt:
cast-media-player {
--logo-image: url('welcome.png');
}
Web Receiver-Display:
Sie können die folgenden Variablen verwenden, um .logo-Attribute anzupassen:
Variablen und Standardwerte
| Name | Standardwert | Beschreibung |
|---|---|---|
| --logo-background | CSS-Property „background“ | |
| --logo-color | CSS-Property „background-color“ | |
| --logo-image | CSS-Property „background-image“ | |
| --logo-repeat | no-repeat | CSS-Eigenschaft „background-repeat“ |
| --logo-size | CSS-Property „background-size“ |
CSS-Vorlage
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Splash-Attribute
Ähnlich wie bei der Klasse .logo umfasst die Klasse .splash den gesamten Player. Wenn du diese Eigenschaften festlegst, werden die .splash-Variablen durch die .logo-Variablen überschrieben, wenn sich der Empfänger im Leerlauf befindet. Das bedeutet, dass du beim Start einen Satz von .logo-Eigenschaften verwenden und separate Hintergründe oder Bilder anzeigen kannst, wenn dein Receiver im Leerlauf ist.
Sie können beispielsweise den weißen und silbernen Verlaufs-Hintergrund mit dimgray überschreiben und ein animiertes Wird geladen…-Symbol hinzufügen:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Web Receiver-Display:
Wenn Sie diese Eigenschaften nicht festlegen, wird auf dem Empfängergerät im Leerlauf standardmäßig der Name Ihrer .logo-Einstellungen oder Ihrer App angezeigt.
Sie können die folgenden Variablen verwenden, um .splash-Attribute anzupassen:
Variablen und Standardwerte
| Name | Standardwert | Beschreibung |
|---|---|---|
| --splash-background | CSS-Property „background“ | |
| --splash-color | CSS-Property „background-color“ | |
| --splash-image | CSS-Property „background-image“ | |
| --splash-repeat | CSS-Eigenschaft „background-repeat“ | |
| --splash-size | CSS-Property „background-size“ |
CSS-Vorlage
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Präsentationsmodus
Wenn im Inaktivitätsmodus bis zu 10 Bilder anstelle des Startbilds angezeigt werden sollen, verwenden Sie die folgenden Diashow-Parameter.
Variablen und Standardwerte
| Name | Standardwert | Beschreibung |
|---|---|---|
| --slideshow-interval-duration | 10 s | Zeit zwischen den Bildern. |
| --slideshow-animation-duration | 2s | Dauer des Übergangs. |
| --slideshow-image-1 | Das erste 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 | Das achte Bild in der Diashow. | |
| --slideshow-image-9 | Das neunte Bild in der Diashow. | |
| --slideshow-image-10 | Das zehnte 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. Das ist in der Regel ein kleines, transparentes Bild, das standardmäßig unten rechts auf dem Empfängergerät angezeigt wird.
Sie können die folgenden Variablen verwenden, um .watermark-Attribute anzupassen:
Variablen und Standardwerte
| Name | Standardwert | Beschreibung |
|---|---|---|
| --watermark-background | CSS-Property „background“ | |
| --watermark-color | CSS-Property „background-color“ | |
| --watermark-image | CSS-Property „background-image“ | |
| --watermark-position | rechts unten | CSS-Eigenschaft „background-position“ |
| --watermark-repeat | no-repeat | CSS-Eigenschaft „background-repeat“ |
| --watermark-size | CSS-Property „background-size“ |
CSS-Vorlage
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Wiedergabe, Anzeigen und andere CSS-Properties
Über die cast-media-player-Auswahl können Sie auch Anzeigen, Schriftarten, Player-Bilder und andere Eigenschaften anpassen.
Variablen und Standardwerte
| Name | Standardwert | Beschreibung |
|---|---|---|
| --ad-title | Anzeige | Der Titel der Anzeige. |
| --skip-ad-title | Anzeige überspringen | Text des Textfelds Werbung überspringen. |
| --break-color | hsl(hue, 100%, 50%) | Farbe für die Markierung für Werbeunterbrechungen. |
| --font-family | Open Sans | Schriftfamilie für Metadaten und die Fortschrittsanzeige. |
| --spinner-image | Standardbild | Das Bild, das beim Start angezeigt werden soll. |
| --buffering-image | Standardbild | Das Bild, das während des Pufferns angezeigt werden soll |
| --pause-image | Standardbild | Das Bild, das während der Pause angezeigt werden soll |
| --play-image | Das Bild, das während der Wiedergabe in den Metadaten angezeigt werden soll. | |
| --theme-hue | 42 | Der Farbton, der für den Player verwendet werden soll. |
| --progress-color | hsl(hue, 95%, 60%) | Farbe für die 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 Layouts für Fernseher gelten aufgrund der Entwicklung von TV‑Standards und des Wunsches, Zuschauern immer ein Vollbild zu präsentieren, einige besondere Anforderungen. Auf Fernsehern kann der äußere Rand eines App-Layouts abgeschnitten werden, damit das gesamte Display ausgefüllt wird. Dieses Verhalten wird allgemein als Overscan bezeichnet. Achten Sie darauf, dass keine Bildschirmelemente aufgrund von Overscan abgeschnitten werden, indem Sie einen Rand von 10 % auf allen Seiten Ihres Layouts einfügen.
Standard-UI für Audio
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
Datenbindung für benutzerdefinierte Benutzeroberflächen
Das Cast Web Receiver SDK unterstützt die Verwendung eines eigenen benutzerdefinierten UI-Elements anstelle von cast-media-player.
Mit der benutzerdefinierten UI-Datenbindung können Sie Ihr eigenes benutzerdefiniertes UI-Element verwenden und die Klasse PlayerDataBinder verwenden, um die UI an den Playerstatus zu binden, anstatt das cast-media-player-Element zum Receiver hinzuzufügen. Der Binder unterstützt auch das Senden von Ereignissen für Datenänderungen, wenn die App keine Datenbindung 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 ein MediaElement hinzufügen, damit der Web Receiver es verwenden kann. Wenn mehrere MediaElement-Objekte verfügbar sind, sollten Sie das MediaElement taggen, das der Web-Receiver verwenden soll. Fügen Sie dazu castMediaElement in die Klassenliste des Videos ein, wie unten gezeigt. Andernfalls wählt der Web Receiver das erste MediaElement aus.
<video class="castMediaElement"></video>