L'SDK Web Receiver fornisce una UI del player integrata. Per implementare questa UI nella tua app Web Receiver personalizzata, devi aggiungere l'elemento cast-media-player al corpo del file HTML.
<body>
<cast-media-player></cast-media-player>
</body>
Le variabili CSS ti consentono di personalizzare varie proprietà cast-media-player, tra cui lo sfondo del player, l'immagine di copertina, la famiglia di caratteri e altro ancora. Puoi
aggiungere queste variabili con stili CSS incorporati, un foglio di stile CSS o
style.setProperty in JavaScript.
Nelle sezioni successive, scopri come personalizzare ogni area dell'elemento del lettore multimediale. Puoi utilizzare i seguenti modelli per iniziare.
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 di Playback
Il logo di riproduzione viene visualizzato nell'angolo in alto a sinistra del ricevitore durante la riproduzione dei contenuti multimediali. Questa proprietà è separata dalla classe .logo. Puoi
personalizzare --playback-logo-image dal selettore body.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Proprietà dello sfondo del player
Le variabili --background impostano le proprietà di sfondo dell'intero player,
visibili durante l'avvio e la riproduzione. Ad esempio, puoi impostare l'intero
sfondo su una sfumatura lineare bianca e argento:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Display del ricevitore web:
Puoi utilizzare le seguenti variabili per personalizzare le proprietà .background:
Variabili e valori predefiniti
| Nome | Valore predefinito | Descrizione |
|---|---|---|
| --background | nero | Proprietà di sfondo CSS |
| --background-color | Proprietà CSS background-color | |
| --background-image | Proprietà background-image CSS | |
| --background-repeat | no-repeat | Proprietà CSS background-repeat |
| --background-size | cover | Proprietà background-size CSS |
Modello CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Proprietà del logo
La classe .logo è posizionata davanti alla classe .background e si estende
su tutto il player. Questa classe mostra quando viene avviato il ricevitore. Se non fornisci
variabili .splash, la classe .logo viene visualizzata anche quando
il ricevitore è in stato di inattività.
L'esempio seguente imposta --logo-image su un'icona dell'equalizzatore denominata
welcome.png. Per impostazione predefinita, un'immagine viene visualizzata al centro del ricevitore:
cast-media-player {
--logo-image: url('welcome.png');
}
Display del ricevitore web:
Puoi utilizzare le seguenti variabili per personalizzare le proprietà .logo:
Variabili e valori predefiniti
| Nome | Valore predefinito | Descrizione |
|---|---|---|
| --logo-background | Proprietà di sfondo CSS | |
| --logo-color | Proprietà CSS background-color | |
| --logo-image | Proprietà background-image CSS | |
| --logo-repeat | no-repeat | Proprietà CSS background-repeat |
| --logo-size | Proprietà background-size CSS |
Modello CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Proprietà Schermata iniziale
Analogamente alla classe .logo, la classe .splash copre l'intero giocatore. Se
imposti queste proprietà, le variabili .splash sostituiranno le variabili .logo
quando il ricevitore è inattivo. Ciò significa che potresti utilizzare un set di proprietà .logo all'avvio e visualizzare sfondi o immagini separati quando il ricevitore è inattivo.
Ad esempio, potresti sostituire lo sfondo con gradiente bianco e argento con
dimgray e aggiungere un'icona animata Attendi…:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Display del ricevitore web:
Se non imposti queste proprietà, il ricevitore utilizza per impostazione predefinita le impostazioni o il nome dell'app .logo quando è inattivo.
Puoi utilizzare le seguenti variabili per personalizzare le proprietà .splash:
Variabili e valori predefiniti
| Nome | Valore predefinito | Descrizione |
|---|---|---|
| --splash-background | Proprietà di sfondo CSS | |
| --splash-color | Proprietà CSS background-color | |
| --splash-image | Proprietà background-image CSS | |
| --splash-repeat | Proprietà CSS background-repeat | |
| --splash-size | Proprietà background-size CSS |
Modello CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Slideshow
Per visualizzare fino a 10 immagini a rotazione durante lo stato di inattività (al posto dell'immagine di avvio), utilizza i seguenti parametri della presentazione.
Variabili e valori predefiniti
| Nome | Valore predefinito | Descrizione |
|---|---|---|
| --slideshow-interval-duration | 10 sec | Tempo tra le immagini. |
| --slideshow-animation-duration | 2 sec | Durata della transizione. |
| --slideshow-image-1 | La prima immagine nella presentazione. | |
| --slideshow-image-2 | Seconda immagine nella presentazione. | |
| --slideshow-image-3 | Terza immagine nella presentazione. | |
| --slideshow-image-4 | Quarta immagine nella presentazione. | |
| --slideshow-image-5 | Quinta immagine nella presentazione. | |
| --slideshow-image-6 | Sesta immagine nella presentazione. | |
| --slideshow-image-7 | Settima immagine nella presentazione. | |
| --slideshow-image-8 | Ottava immagine nella presentazione. | |
| --slideshow-image-9 | Nona immagine nella presentazione. | |
| --slideshow-image-10 | Decima immagine nella presentazione. |
Modello 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:
}
Proprietà filigrana
Durante la riproduzione dei contenuti multimediali viene visualizzato un .watermark. Si tratta in genere di un'immagine piccola e trasparente che viene visualizzata per impostazione predefinita in basso a destra del ricevitore.
Puoi utilizzare le seguenti variabili per personalizzare le proprietà .watermark:
Variabili e valori predefiniti
| Nome | Valore predefinito | Descrizione |
|---|---|---|
| --watermark-background | Proprietà di sfondo CSS | |
| --watermark-color | Proprietà CSS background-color | |
| --watermark-image | Proprietà background-image CSS | |
| --watermark-position | in basso a destra | Proprietà CSS background-position |
| --watermark-repeat | no-repeat | Proprietà CSS background-repeat |
| --watermark-size | Proprietà background-size CSS |
Modello CSS
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Riproduzione, annunci e altre proprietà CSS
Puoi anche personalizzare annunci, caratteri, immagini del player e altre proprietà dal selettore
cast-media-player.
Variabili e valori predefiniti
| Nome | Valore predefinito | Descrizione |
|---|---|---|
| --ad-title | Annuncio | Titolo dell'annuncio. |
| --skip-ad-title | Salta annuncio | Testo della casella di testo Salta annuncio. |
| --break-color | hsl(hue, 100%, 50%) | Colore del segno di interruzione pubblicitaria. |
| --font-family | Open Sans | Famiglia di caratteri per i metadati e la barra di avanzamento. |
| --spinner-image | Immagine predefinita | L'immagine da visualizzare durante l'avvio. |
| --buffering-image | Immagine predefinita | L'immagine da visualizzare durante il buffering. |
| --pause-image | Immagine predefinita | L'immagine da visualizzare durante la pausa. |
| --play-image | L'immagine da mostrare nei metadati durante la riproduzione. | |
| --theme-hue | 42 | La tonalità da utilizzare per il giocatore. |
| --progress-color | hsl(hue, 95%, 60%) | Colore della barra di avanzamento. |
Modello 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:
}
Per ulteriori informazioni e illustrazioni, consulta Styled Media Receiver.
Overscan
I layout per la TV hanno alcuni requisiti unici a causa dell'evoluzione degli standard TV e del desiderio di presentare sempre agli spettatori un'immagine a schermo intero. I dispositivi TV possono tagliare il bordo esterno del layout di un'app per assicurarsi che l'intero display sia riempito. Questo comportamento è generalmente chiamato overscan. Evita che gli elementi dello schermo vengano tagliati a causa dell'overscan incorporando un margine del 10% su tutti i lati del layout.
UI audio predefinita
MetadataType.MUSIC_TRACK
A. --logo-image
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist o MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. Riproduci/Pausa
Associazione di dati dell'interfaccia utente personalizzata
L'SDK Cast Web Receiver supporta l'utilizzo di un elemento UI personalizzato anziché
cast-media-player.
Il binding dei dati dell'interfaccia utente personalizzata ti consente di utilizzare il tuo elemento dell'interfaccia utente personalizzata e la classe
PlayerDataBinder
per associare l'interfaccia utente allo stato del player anziché aggiungere l'elemento
cast-media-player al ricevitore. Il binder supporta anche l'invio di eventi per le modifiche ai dati, se l'app non supporta il data binding.
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();
Devi aggiungere almeno un
MediaElement
all'HTML in modo che il ricevitore web possa utilizzarlo. Se sono disponibili più oggetti MediaElement, devi taggare quello che vuoi che utilizzi il Web
Receiver.MediaElement Per farlo, aggiungi castMediaElement all'elenco delle classi del video, come mostrato di seguito; in caso contrario, Web Receiver sceglierà il primo MediaElement.
<video class="castMediaElement"></video>