Ricevitore multimediale con stili

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

Iscrizione

Per utilizzare l'SMR per la tua applicazione, seleziona l'opzione Styled Media Receiver quando aggiungi una nuova applicazione nella Google Cast SDK Developer Console. Per ulteriori informazioni, consulta la sezione Registrazione. Questa opzione include un link per visualizzare l'anteprima del foglio di stile predefinito, nonché un campo in cui devi inserire l'URL al foglio di stile. Puoi utilizzare 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 tuo file CSS, puoi fare clic su Anteprima per vedere come appariranno i tuoi stili nel destinatario.

Supporti 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 del mittente utilizzando il canale multimediale di Cast SDK. L'SMR è completamente conforme alle linee guida per l'esperienza utente per la riproduzione di contenuti multimediali su un dispositivo di trasmissione.

Tipo di carattere

Consulta la sezione Caratteri preinstallati per un elenco di caratteri preinstallati con il ricevitore.

CSS

Il destinatario di stili con stili utilizza le seguenti classi CSS:

  • .background: lo sfondo per il ricevitore.
  • .logo: il logo mostrato all'avvio del destinatario. Questa classe viene utilizzata anche quando il destinatario è in stato di inattività e non viene dichiarata nessuna classe .splash.
  • .progressBar: la barra di avanzamento per la riproduzione di contenuti multimediali.
  • .splash: la schermata mostrata quando il ricevitore è inattivo. Se questa classe non viene dichiarata, per impostazione predefinita il destinatario utilizza .logo o il nome dell'app.
  • .watermark: una filigrana mostrata 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 questi corsi in uso.

Video

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

Audio

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

       

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

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