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.
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 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:
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:
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]
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>