Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Określanie stylu odtwarzacza

Pakiet Web Receiver SDK udostępnia wbudowany interfejs odtwarzacza. Aby zaimplementować ten interfejs w niestandardowej aplikacji Web Receiver, musisz dodać element cast-media-player do treści pliku HTML.

<body>
  <cast-media-player></cast-media-player>
</body>

Zmienne CSS umożliwiają dostosowanie różnych właściwości cast-media-player, w tym tła odtwarzacza, obrazu powitalnego, rodziny czcionek i innych. Możesz dodać te zmienne za pomocą stylów CSS w tekście, arkusza stylów CSS lub style.setProperty w JavaScript.

W następnych sekcjach dowiesz się, jak dostosować każdy obszar elementu odtwarzacza multimediów. Aby rozpocząć, możesz użyć tych szablonów.

Zewnętrzny

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

Wbudowany

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

Logo odtwarzania wyświetla się w lewym górnym rogu odbiornika podczas odtwarzania multimediów. Ta właściwość jest oddzielona od klasy .logo. Możesz dostosować --playback-logo-image za pomocą selektora body.

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

Właściwości tła odtwarzacza

Zmienne --background ustawiają właściwości tła całego odtwarzacza, które są widoczne podczas uruchamiania i odtwarzania. Możesz na przykład ustawić całe tło na biało-srebrny gradient liniowy:

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

Wyświetlanie w Web Receiver:

Tło niestandardowe

Do dostosowania właściwości .background możesz użyć tych zmiennych:

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--background	czarny	Właściwość CSS background
--background-color		Właściwość CSS background-color
--background-image		Właściwość CSS background-image
--background-repeat	no-repeat	Właściwość CSS background-repeat
--background-size	cover utworu	Właściwość CSS background-size

Szablon CSS

cast-media-player {
  --background:
  --background-color:
  --background-image:
  --background-repeat:
  --background-size:
}

Właściwości logo

Klasa .logo jest umieszczona przed klasą .background i obejmuje cały odtwarzacz. Ta klasa wyświetla się podczas uruchamiania odbiornika. Jeśli nie podasz żadnych zmiennych .splash, klasa .logo będzie się też wyświetlać, gdy odbiornik jest w stanie bezczynności.

Ten przykład ustawia --logo-image na ikonę korektora o nazwie welcome.png. Domyślnie obraz jest wyśrodkowany w odbiorniku:

cast-media-player {
  --logo-image: url('welcome.png');
}

Wyświetlanie w Web Receiver:

Do dostosowania właściwości .logo możesz użyć tych zmiennych:

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--logo-background		Właściwość CSS background
--logo-color		Właściwość CSS background-color
--logo-image		Właściwość CSS background-image
--logo-repeat	no-repeat	Właściwość CSS background-repeat
--logo-size		Właściwość CSS background-size

Szablon CSS

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

Właściwości ekranu powitalnego

Podobnie jak klasa .logo, klasa .splash obejmuje cały odtwarzacz. Jeśli ustawisz te właściwości, zmienne .splash zastąpią zmienne .logo, gdy odbiornik jest w stanie bezczynności. Oznacza to, że podczas uruchamiania możesz używać jednego zestawu właściwości .logo, a gdy odbiornik jest w stanie bezczynności, możesz wyświetlać osobne tła lub obrazy.

Możesz na przykład zastąpić biało-srebrne tło gradientowe kolorem dimgray i dodać animowaną ikonę czekania...:

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

Wyświetlanie w Web Receiver:

Niestandardowy ekran powitalny

Jeśli nie ustawisz tych właściwości, gdy odbiornik jest w stanie bezczynności, domyślnie będzie używać ustawień .logo lub nazwy aplikacji.

Do dostosowania właściwości .splash możesz użyć tych zmiennych:

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--splash-background		Właściwość CSS background
--splash-color		Właściwość CSS background-color
--splash-image		Właściwość CSS background-image
--splash-repeat		Właściwość CSS background-repeat
--splash-size		Właściwość CSS background-size

Szablon CSS

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

Pokaz slajdów

Aby w stanie bezczynności (zamiast obrazu powitalnego) wyświetlać maksymalnie 10 obrazów, użyj tych parametrów pokazu slajdów.

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--slideshow-interval-duration	10s	Czas między obrazami.
--slideshow-animation-duration	2s	Czas trwania przejścia.
--slideshow-image-1		Pierwszy obraz w pokazie slajdów.
--slideshow-image-2		Drugi obraz w pokazie slajdów.
--slideshow-image-3		Trzeci obraz w pokazie slajdów.
--slideshow-image-4		Czwarty obraz w pokazie slajdów.
--slideshow-image-5		Piąty obraz w pokazie slajdów.
--slideshow-image-6		Szósty obraz w pokazie slajdów.
--slideshow-image-7		Siódmy obraz w pokazie slajdów.
--slideshow-image-8		Ósmy obraz w pokazie slajdów.
--slideshow-image-9		Dziewiąty obraz w pokazie slajdów.
--slideshow-image-10		Dziesiąty obraz w pokazie slajdów.

Szablon CSS

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

Właściwości znaku wodnego

Podczas odtwarzania multimediów wyświetla się .watermark. Jest to zwykle mały, przezroczysty obraz, który domyślnie znajduje się w prawym dolnym rogu odbiornika.

Do dostosowania właściwości .watermark możesz użyć tych zmiennych:

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--watermark-background		Właściwość CSS background
--watermark-color		Właściwość CSS background-color
--watermark-image		Właściwość CSS background-image
--watermark-position	w prawym dolnym rogu	Właściwość CSS background-position
--watermark-repeat	no-repeat	Właściwość CSS background-repeat
--watermark-size		Właściwość CSS background-size

Szablon CSS

cast-media-player {
  --watermark-background:
  --watermark-color:
  --watermark-image:
  --watermark-position:
  --watermark-repeat:
  --watermark-size:
}

Odtwarzanie, reklamy i inne właściwości CSS

Możesz też dostosować reklamy, czcionki, obrazy odtwarzacza i inne właściwości za pomocą selektora cast-media-player.

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--ad-title	Reklama	Tytuł reklamy.
--skip-ad-title	Pomiń reklamę	Tekst pola tekstowego Pomiń reklamę.
--break-color	hsl(hue, 100%, 50%)	Kolor znacznika przerwy na reklamę.
--font-family	Open Sans	Rodzina czcionek metadanych i paska postępu.
--spinner-image	Domyślny obraz	Obraz wyświetlany podczas uruchamiania.
--buffering-image	Domyślny obraz	Obraz wyświetlany podczas buforowania.
--pause-image	Domyślny obraz	Obraz wyświetlany podczas wstrzymania.
--play-image		Obraz wyświetlany w metadanych podczas odtwarzania.
--theme-hue	42	Odcień używany w odtwarzaczu.
--progress-color	hsl(hue, 95%, 60%)	Kolor paska postępu.

Szablon CSS

cast-media-player {
  --ad-title:
  --skip-ad-title:
  --break-color:
  --font-family:
  --spinner-image:
  --buffering-image:
  --pause-image:
  --play-image:
  --theme-hue:
  --progress-color:
}

Więcej informacji i dodatkowe ilustracje znajdziesz w artykule Styled Media Receiver.

Nadmiarowość obrazu

Układy na telewizorach mają pewne unikalne wymagania ze względu na ewolucję standardów telewizyjnych i chęć wyświetlania widzom obrazu na pełnym ekranie. Urządzenia telewizyjne mogą przycinać zewnętrzne krawędzie układu aplikacji, aby zapewnić wypełnienie całego ekranu. Takie działanie jest zwykle nazywane nadmiarowością obrazu. Aby uniknąć przycinania elementów ekranu z powodu nadmiarowości obrazu, dodaj 10% marginesu ze wszystkich stron układu.

Domyślny interfejs dźwięku

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist lub MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. Odtwórz / wstrzymaj

Wiązanie danych w interfejsie niestandardowym

Pakiet Cast Web Receiver SDK umożliwia używanie własnego elementu interfejsu niestandardowego zamiast cast-media-player.

Wiązanie danych w interfejsie niestandardowym umożliwia używanie własnego elementu interfejsu niestandardowego i klasy PlayerDataBinder do wiązania interfejsu ze stanem odtwarzacza zamiast dodawania elementu cast-media-playerdo odbiornika. Jeśli aplikacja nie obsługuje wiązania danych, binder obsługuje też wysyłanie zdarzeń dotyczących zmian danych.

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();

Do kodu HTML musisz dodać co najmniej 1 MediaElement , aby Web Receiver mógł go używać. Jeśli dostępnych jest kilka obiektów MediaElement, musisz oznaczyć element MediaElement, którego chcesz używać w Web Receiver. Aby to zrobić, dodaj castMediaElement do listy klas filmu, jak pokazano poniżej. W przeciwnym razie Web Receiver wybierze pierwszy element MediaElement.

<video class="castMediaElement"></video>

Wstecz

HLS w migracji Shaka Player

Dalej

Optymalizacja pod kątem inteligentnych ekranów

Określanie stylu odtwarzacza Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Logo odtwarzania

Właściwości tła odtwarzacza

Zmienne i wartości domyślne

Szablon CSS

Właściwości logo

Zmienne i wartości domyślne

Szablon CSS

Właściwości ekranu powitalnego

Zmienne i wartości domyślne

Szablon CSS

Pokaz slajdów

Zmienne i wartości domyślne

Szablon CSS

Właściwości znaku wodnego

Zmienne i wartości domyślne

Szablon CSS

Odtwarzanie, reklamy i inne właściwości CSS

Zmienne i wartości domyślne

Szablon CSS

Nadmiarowość obrazu

Domyślny interfejs dźwięku

MetadataType.MUSIC_TRACK

Wiązanie danych w interfejsie niestandardowym

Określanie stylu odtwarzacza