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

Stile del player

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.

Esterno

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

In linea

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

Sfondo personalizzato

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:

Splash personalizzato

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]

F. MediaStatus.currentTime

G. MediaInformation.duration

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>

Indietro

HLS su Shaka Player Migration

Avanti

Ottimizza per smart display

Stile del player Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Logo di Playback

Proprietà dello sfondo del player

Variabili e valori predefiniti

Modello CSS

Proprietà del logo

Variabili e valori predefiniti

Modello CSS

Proprietà Schermata iniziale

Variabili e valori predefiniti

Modello CSS

Slideshow

Variabili e valori predefiniti

Modello CSS

Proprietà filigrana

Variabili e valori predefiniti

Modello CSS

Riproduzione, annunci e altre proprietà CSS

Variabili e valori predefiniti

Modello CSS

Overscan

UI audio predefinita

MetadataType.MUSIC_TRACK

Associazione di dati dell'interfaccia utente personalizzata

Stile del player