Questa pagina è stata tradotta dall'API Cloud Translation.

Stile del player

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.

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

Sfondo personalizzato

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:

Spruzzo personalizzato

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]

F. MediaStatus.currentTime

G. MediaInformation.duration

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>

Indietro

HLS su Shaka Player Migration

Avanti

Ottimizza per smart display