Ricevitore multimediale con stile

Il ricevitore multimediale con stile (SMR) consente all'applicazione del mittente di riprodurre contenuti multimediali su un dispositivo di trasmissione senza creare una tua applicazione ricevitore personalizzata. Puoi personalizzare la combinazione di colori e il branding di SMR fornendo il tuo file CSS durante la registrazione.

Iscrizione

Per utilizzare l'SMR per la tua applicazione, seleziona l'opzione Ricevitore multimediale con stile quando aggiungi una nuova applicazione nella Console per gli sviluppatori dell'SDK Google Cast. Consulta la pagina Registrazione per ulteriori informazioni. Questa opzione include un link per visualizzare in anteprima il foglio di stile predefinito e un campo in cui inserire l'URL del foglio di stile. Puoi usare gli stili predefiniti o fornire l'URL HTTPS al tuo file CSS. Puoi utilizzare il tuo server per ospitare il file CSS. Dopo aver fornito l'URL al file CSS, puoi fare clic su Anteprima per vedere come appariranno i tuoi stili sul destinatario.

Contenuti multimediali supportati

Tutti i ricevitori supportano i tipi di contenuti multimediali, come descritto nella sezione Contenuti multimediali supportati.

L'SMR supporta video, audio e immagini ed è controllato da un'applicazione mittente utilizzando il canale multimediale dell'SDK Cast. L'SMR è pienamente conforme alle Linee guida sull'esperienza utente per la riproduzione di contenuti multimediali su un dispositivo di trasmissione.

Digita i caratteri

Vedi Caratteri preinstallati per un elenco dei caratteri preinstallati con il destinatario.

CSS

Il ricevitore multimediale con stile utilizza le seguenti classi CSS:

  • .background: lo sfondo del destinatario.
  • .logo: il logo mostrato all'avvio del ricevitore. Questa classe viene utilizzata anche quando il ricevitore è in stato inattivo e non è stata dichiarata alcuna classe .splash.
  • .progressBar: la barra di avanzamento della riproduzione di contenuti multimediali.
  • .splash: la schermata mostrata quando il ricevitore è in stato di inattività. Se questa classe non viene dichiarata, per impostazione predefinita il destinatario utilizzerà .logo o il nome dell'app.
  • .watermark: una filigrana visualizzata durante la riproduzione dei contenuti multimediali.

Ecco un esempio di file CSS che utilizza queste classi:

.background {
  background: center no-repeat url(background.png);
}

.logo {
  background-image: url(logo.png);
}

.progressBar {
  background-color: rgb(238, 255, 65);
}

.splash {
  background-image: url(splash.png);
}

.watermark {
  background-image: url(watermark.png);
  background-size: 57px 57px;
}

Di seguito sono riportate alcune illustrazioni di queste classi in uso.

Video

Nota: la grafica dell'immagine video è di 96 x 143 pixel e viene selezionata per la visualizzazione la prima risorsa associata ai metadati multimediali. Le immagini vengono ridimensionate per adattarsi alle dimensioni previste.

Audio

Nota: la copertina dell'album audio è di 384 x 384 pixel e per la visualizzazione viene selezionata la prima risorsa immagine associata ai metadati multimediali. Le immagini vengono ridimensionate per adattarsi alle dimensioni previste.

       

Immagini da Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

Immagine da Sintel: (c) copyright Blender Foundation / www.sintel.org