L'SDK Web ricevitore fornisce un'interfaccia utente integrata del player. Per implementare questa UI nella tua app ricevitore web 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 sfondo del player, immagine iniziale, 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 scoprirai come personalizzare ogni area dell'elemento del media player. Per iniziare, puoi utilizzare i seguenti modelli.
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 riproduzione
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 di body
.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Proprietà 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 un gradiente lineare bianco 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 |
---|---|---|
--sfondo | nero | Proprietà di background CSS |
--background-color | Proprietà del colore di sfondo del CSS | |
--background-image | Proprietà immagine di sfondo del CSS | |
--background-repeat | nessuna ripetizione | Proprietà ripetizione sfondo CSS |
--background-size | cover | Proprietà delle dimensioni di sfondo del CSS |
Modello CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Proprietà logo
La classe .logo
è posizionata davanti alla classe .background
e occupa
l'intero player. Questa classe viene visualizzata all'avvio del ricevitore. Se
non fornisci variabili .splash
, la classe .logo
viene visualizzata anche quando
il ricevitore è in stato inattivo.
L'esempio seguente imposta --logo-image
su un'icona dell'equalizzatore denominata welcome.png
. Per impostazione predefinita, un'immagine viene mostrata 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 background CSS | |
--logo-color | Proprietà del colore di sfondo del CSS | |
--logo-image | Proprietà immagine di sfondo del CSS | |
--logo-repeat | nessuna ripetizione | Proprietà ripetizione sfondo CSS |
--logo-size | Proprietà delle dimensioni di sfondo del CSS |
Modello CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Proprietà splash
Analogamente alla classe .logo
, la classe .splash
copre l'intero player. Se imposti queste proprietà, le variabili .splash
sostituiranno le variabili .logo
quando il ricevitore è inattivo. Ciò significa che puoi utilizzare un insieme di
proprietà .logo
all'avvio e visualizzare sfondi o immagini separati quando
il ricevitore è inattivo.
Ad esempio, puoi sostituire lo sfondo sfumato bianco e argento con dimgray
e aggiungere un'icona animata in attesa...:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Display del ricevitore web:
Se non configuri queste proprietà, quando il destinatario è inattivo, vengono usate per impostazione predefinita le tue impostazioni .logo
o il nome dell'app.
Puoi utilizzare le seguenti variabili per personalizzare le proprietà .splash
:
Variabili e valori predefiniti
Nome | Valore predefinito | Descrizione |
---|---|---|
--splash-background | Proprietà di background CSS | |
--splash-color | Proprietà del colore di sfondo del CSS | |
--splash-image | Proprietà immagine di sfondo del CSS | |
--splash-repeat | Proprietà ripetizione sfondo CSS | |
--splash-size | Proprietà delle dimensioni di sfondo del CSS |
Modello CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Presentazione
Per fare in modo che scorrono fino a 10 immagini durante lo stato di inattività (al posto dell'immagine iniziale), 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 | 2s | Durata della transizione. |
--slideshow-image-1 | 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à della filigrana
Durante la riproduzione di contenuti multimediali viene visualizzato un .watermark
. Di solito si tratta di una piccola immagine trasparente che per impostazione predefinita si trova in basso a destra rispetto al ricevitore.
Puoi utilizzare le seguenti variabili per personalizzare le proprietà .watermark
:
Variabili e valori predefiniti
Nome | Valore predefinito | Descrizione |
---|---|---|
--watermark-background | Proprietà di background CSS | |
--watermark-color | Proprietà del colore di sfondo del CSS | |
--watermark-image | Proprietà immagine di sfondo del CSS | |
--watermark-position | in basso a destra | Proprietà posizione sfondo del CSS |
--watermark-repeat | nessuna ripetizione | Proprietà ripetizione sfondo CSS |
--watermark-size | Proprietà delle dimensioni di sfondo del 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(tonalità, 100%, 50%) | Colore dell'indicatore 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 all'avvio. |
--buffering-image | Immagine predefinita | L'immagine da visualizzare durante il buffering. |
--pause-image | Immagine predefinita | L'immagine da visualizzare quando il video è in pausa. |
--play-image | L'immagine da mostrare nei metadati durante la riproduzione. | |
--theme-hue | 42 | La tonalità da utilizzare per il player. |
--progress-color | hsl(tonalità, 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 aggiuntive, consulta la sezione Ricevitore multimediale con stile.
Overscan
I layout per la TV hanno requisiti specifici dovuti all'evoluzione degli standard TV e al desiderio di presentare sempre un'immagine a schermo intero agli spettatori. I dispositivi TV possono tagliare il bordo esterno del layout di un'app per garantire che l'intero display venga riempito. Questo comportamento è generalmente definito overscan. Per evitare che gli elementi dello schermo vengano tagliati a causa dell'overscan, incorpora un margine del 10% su tutti i lati del layout.
UI audio predefinita
MetadataType.MUSIC_TRACK
R. --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 UI personalizzata
L'SDK Cast Web ricevir supporta l'utilizzo del tuo elemento UI personalizzato anziché
di cast-media-player
.
L'associazione di dati personalizzata della UI ti consente di usare il tuo elemento UI personalizzato 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 dei dati, se l'app non supporta l'associazione di dati.
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 elemento
MediaElement
al codice HTML in modo che il ricevitore web possa utilizzarlo. Se sono disponibili più oggetti MediaElement
, devi taggare il MediaElement
che vuoi che il ricevitore web utilizzi. Per farlo, aggiungi castMediaElement
all'elenco delle classi del video,
come mostrato sotto; in caso contrario, il ricevitore web sceglierà la prima
MediaElement
.
<video class="castMediaElement"></video>