Ta strona została przetłumaczona przez Cloud Translation API.

Określanie stylu odtwarzacza

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

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

Zmienne CSS pozwalają dostosować różne właściwości cast-media-player, w tym tło odtwarzacza, obraz powitalny czy rodzinę czcionek. Możesz dodać te zmienne za pomocą wbudowanych stylów CSS, arkusza stylów CSS lub obiektu style.setProperty w JavaScript.

W następnych sekcjach dowiesz się, jak dostosować poszczególne obszary odtwarzacza. Na początku możesz skorzystać z podanych niżej szablonów.

Zewnętrzne

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

W treści

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

Podczas odtwarzania multimediów w lewym górnym rogu odbiornika wyświetla się logo odtwarzania. Ta właściwość jest niezależna od klasy .logo. --playback-logo-image możesz dostosować 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. Na przykład w całym tle możesz ustawić biały i srebrny gradient liniowy:

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

Wyświetlacz odbiornika internetowego:

Tło niestandardowe

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

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--background	czarny	Właściwość tła CSS
--background-color		Właściwość koloru tła CSS
--background-image		Właściwość CSS „tle-image”
--background-repeat	bez powtarzania	Mikrodane CSS „Background-repeat”
--background-size	cover utworu	Właściwość rozmiaru tła CSS

Szablon CSS

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

Właściwości logo

Klasa .logo znajduje się 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 wyświetli się też wtedy, gdy odbiornik będzie nieaktywny.

Poniższy przykład ustawia --logo-image na ikonę korektora o nazwie welcome.png. Obraz jest domyślnie na środku odbiornika:

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

Wyświetlacz odbiornika internetowego:

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

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--logo-background		Właściwość tła CSS
--logo-color		Właściwość koloru tła CSS
--logo-image		Właściwość CSS „tle-image”
--logo-repeat	bez powtarzania	Mikrodane CSS „Background-repeat”
--logo-size		Właściwość rozmiaru tła CSS

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 będzie nieaktywny. Oznacza to, że w momencie uruchomienia możesz użyć 1 zestawu właściwości .logo, a gdy odbiornik będzie nieaktywny, wyświetlisz osobne tła lub obrazy.

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

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

Wyświetlacz odbiornika internetowego:

Niestandardowy ekran powitalny

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

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

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--splash-background		Właściwość tła CSS
--splash-color		Właściwość koloru tła CSS
--splash-image		Właściwość CSS „tle-image”
--splash-repeat		Mikrodane CSS „Background-repeat”
--splash-size		Właściwość rozmiaru tła CSS

Szablon CSS

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

Pokaz slajdów

Użyj poniższych parametrów pokazu slajdów, aby wyświetlać maksymalnie 10 obrazów w stanie bezczynności (zamiast obrazu powitalnego).

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--slideshow-interval-duration	10 s	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ąta grafika 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 umieszczony domyślnie w prawym dolnym rogu odbiornika.

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

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--watermark-background		Właściwość tła CSS
--watermark-color		Właściwość koloru tła CSS
--watermark-image		Właściwość CSS „tle-image”
--watermark-position	w prawym dolnym rogu	Właściwość CSS „tle-position”
--watermark-repeat	bez powtarzania	Mikrodane CSS „Background-repeat”
--watermark-size		Właściwość rozmiaru tła CSS

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

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

Zmienne i wartości domyślne

Nazwa	Wartość domyślna	Opis
--ad-title	Reklama	Tytuł reklamy.
--skip-ad-title	Pomiń reklamę	Tekst z pola tekstowego Pomiń reklamę.
--break-color	hsl(hue; 100%; 50%)	Kolor znaku przerwy na reklamę.
--font-family	Open Sans	Rodzina czcionek metadanych i paska postępu.
--spinner-image	Domyślny obraz	Obraz do wyświetlenia podczas uruchamiania.
--buffering-image	Domyślny obraz	Obraz do wyświetlenia podczas buforowania.
--pause-image	Domyślny obraz	Obraz do wyświetlenia po wstrzymaniu.
--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 Odbiornik multimediów ze stylem.

Nadmiarowość obrazu

Układy na telewizory mają pewne szczególne wymagania ze względu na ewolucję standardów telewizyjnych i potrzebę ciągłego wyświetlania widzom obrazu na pełnym ekranie. Telewizory mogą przypinać zewnętrzną krawędź układu aplikacji, by wypełnić cały ekran. Takie działanie jest zwykle nazywane nadmierne skanowaniem. Unikaj przycinania elementów ekranu w wyniku przeskanowania – zadbaj o 10-procentowy margines po każdej stronie układu.

Domyślny interfejs audio

MetadataType.MUSIC_TRACK

O. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

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

Odc. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. Odtwórz/wstrzymaj

Niestandardowe powiązanie danych interfejsu

Pakiet SDK Cast Web Deliveryr obsługuje używanie własnego niestandardowego elementu interfejsu zamiast cast-media-player.

Niestandardowe wiązanie danych interfejsu pozwala użyć własnego elementu interfejsu oraz użyć klasy PlayerDataBinder do powiązania interfejsu ze stanem odtwarzacza, zamiast dodawać element cast-media-player do odbiornika. Powiązanie obsługuje też wysyłanie zdarzeń związanych ze zmianami danych, jeśli aplikacja nie obsługuje wiązania 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();

Należy dodać do kodu HTML co najmniej 1 element MediaElement, aby umożliwić odbiorcom internetowe z nim korzystanie. Jeśli dostępnych jest wiele obiektów MediaElement, otaguj element MediaElement, którego ma używać odbiornik Web. Aby to zrobić, dodaj dyrektywę castMediaElement do listy klas filmu (jak pokazano poniżej). W przeciwnym razie odbiornik internetowy wybierze pierwszą klasę MediaElement.

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

Wstecz

HLS w migracji Shaka Player

Dalej

Optymalizacja pod kątem inteligentnych ekranów