Immagine secondaria

Gli sviluppatori di Google Cast possono aggiungere un'immagine informativa (secondaria) all'interfaccia utente per le applicazioni audio e video. Visualizza i formati delle immagini supportati per la compatibilità.

L'immagine secondaria viene visualizzata nella parte in alto a destra del display e può essere utilizzata per mostrare un'immagine con informazioni aggiuntive sui contenuti attualmente in riproduzione, ad esempio il formato dei contenuti, l'indicativo di chiamata della stazione radio o la classificazione del programma TV. L'immagine secondaria rimane sullo schermo purché la funzionalità sia abilitata per i contenuti correnti e il player non sia inattivo.

La Tabella 1 mostra l'esperienza di un utente quando la funzionalità viene attivata sui tipi di dispositivo e controlli applicabili. I dettagli relativi all'implementazione e all'integrazione differiscono leggermente tra le app audio e video. Consulta le sezioni seguenti per l'integrazione di questa funzionalità nella tua app Ricevitore web.

Tabella 1: UI immagine secondaria per contenuto e tipo di dispositivo

Tipo di dispositivo	Contenuti audio	Contenuti degli annunci video
Chromecast
Chromecast con Google TV
Smart display
Telecomando smart display		Nota: l'immagine secondaria non è supportata sui telecomandi per i contenuti video.

Audio

Panoramica

L'immagine secondaria dei contenuti audio è basata sui metadati dei contenuti caricati. Una volta caricato l'elemento multimediale, eventuali modifiche successive alla proprietà secondaryImage dei metadati verranno riportate nell'interfaccia utente.

Se uno smart display viene utilizzato come telecomando per l'audio, l'immagine secondaria verrà visualizzata anche sull'UI dello smart display quando configurato.

Nota: consigliamo agli sviluppatori di Google Cast di utilizzare la UI audio predefinita fornita tramite l'elemento <cast-media-player> del Ricevitore web. L'interfaccia utente predefinita fornisce un'esperienza utente coerente su Chromecast, smart display e Chromecast con Google TV, riducendo al minimo l'overhead. La funzionalità dell'immagine secondaria non è supportata per le app che utilizzano un'interfaccia utente personalizzata. Questo non si applica ai telecomandi, in quanto verranno sempre visualizzati con l'immagine secondaria, se impostata.

Implementazione

Per impostare, rimuovere o aggiornare l'immagine secondaria, è necessario modificare la proprietà secondaryImage di MusicTrackMediaMetadata. La proprietà utilizza un oggetto Image completato con l'URL che descrive dove è ospitata l'immagine secondaria.

Nell'esempio seguente, l'immagine secondaria è impostata nell'intercettore load. Al termine del caricamento dei contenuti viene visualizzata l'immagine secondaria.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

Per aggiornare l'immagine secondaria durante la riproduzione, l'applicazione deve utilizzare PlayerManager per ottenere MediaInformation chiamando getMediaInformation. L'applicazione deve quindi modificare la proprietà metadata aggiornando la proprietà secondaryImage al valore desiderato. Infine, le chiamate a setMediaInformation con le nuove informazioni aggiornano l'interfaccia utente. Questo metodo può essere utilizzato per gestire le modifiche ai metadati fornite tramite aggiornamenti come gli eventi EMSG o ID3 durante la riproduzione.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

Per annullare l'impostazione dell'immagine secondaria, imposta la proprietà secondaryImage su null nell'oggetto metadati.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

Video

Panoramica

Per i contenuti video, l'immagine secondaria viene impostata e rimossa utilizzando UiManager. L'immagine secondaria viene mostrata insieme all'overlay dei controlli video.

Implementazione

Per impostare l'immagine secondaria, l'applicazione deve ricevere un'istanza UiManager e chiamare setSecondaryImage. Esistono due parametri: SecondaryImagePosition e url dell'immagine. L'impostazione dell'immagine secondaria può essere eseguita in qualsiasi momento, ma viene mostrata solo quando un utente attiva l'overlay come primo piano.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

Per rimuovere l'immagine secondaria, imposta l'URL dell'immagine su null o su una stringa vuota.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

Passaggi successivi

Le operazioni che puoi aggiungere al tuo ricevitore web vengono terminate. Ora puoi creare un'app del mittente su iOS, Android o Web.