Style den Player

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.

Extern

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;
}

Inline
<!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>

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:

Benutzerdefinierter Hintergrund

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:

Benutzerdefiniertes Logo

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:

Benutzerdefinierter Splash

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]

F) MediaStatus.currentTime

G. MediaInformation.duration

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>