Immagine secondaria

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

L'immagine secondaria viene visualizzata in alto a destra sul 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 attivata per i contenuti correnti e il player non sia in stato inattivo.

La tabella 1 mostra l'esperienza di un utente quando la funzionalità è abilitata sui tipi di dispositivi e sui controlli applicabili. I dettagli di implementazione e integrazione delle app audio e video sono leggermente diversi. Consulta le sezioni seguenti per informazioni su come integrare questa funzionalità nell'app Web Ricevir.

Tabella 1: UI dell'immagine secondaria per contenuto e tipo di dispositivo
Tipo di dispositivo Contenuti audio Contenuti degli annunci video
Chromecast Immagine secondaria sulle chiavette di Chromecast per i contenuti audio. Immagine secondaria sulle chiavette di Chromecast per i contenuti video.
Chromecast con Google TV Immagine secondaria su Chromecast con chiavette Google TV per i contenuti audio. Immagine secondaria su Chromecast con chiavette Google TV per i contenuti video.
Smart display Immagine secondaria su smart display per i contenuti audio. Immagine secondaria su smart display per i contenuti video.
telecomando per smart display Immagine secondaria sui telecomandi dello smart display per i contenuti audio. Nota: l'immagine secondaria non è supportata sui telecomandi per i contenuti video.

Audio

Panoramica

L'immagine secondaria per i contenuti audio è basata sui metadati dei contenuti caricati. Una volta caricato l'elemento multimediale, tutte le modifiche successive alla proprietà secondaryImage dei metadati vengono applicate nell'interfaccia utente.

Se viene utilizzato uno smart display come telecomando per l'audio, l'immagine secondaria verrà visualizzata anche nell'UI dello smart display, se impostata.

Implementazione

Per impostare, rimuovere o aggiornare l'immagine secondaria, la proprietà secondaryImage di MusicTrackMediaMetadata deve essere modificata. La proprietà accetta 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 nel player, 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 usare PlayerManager per ottenere MediaInformation chiamando getMediaInformation. L'applicazione deve quindi modificare metadata aggiornando la proprietà secondaryImage sul valore desiderato. Infine, chiamandosetMediaInformation con le nuove informazioni si aggiornerà l'interfaccia utente. Questo metodo può essere utilizzato per gestire le modifiche ai metadati forniti 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 di 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 con l'overlay dei controlli video.

Implementazione

Per impostare l'immagine secondaria, l'applicazione deve ottenere un'istanza di UiManager e chiamare setSecondaryImage. Prevede due parametri: SecondaryImagePosition e l'URL dell'immagine. Puoi impostare l'immagine secondaria in qualsiasi momento, ma viene mostrata solo quando un utente attiva lo spostamento in primo piano dell'overlay.

/**
 * 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');

La rimozione dell'immagine secondaria viene eseguita impostando 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

Con questo si concluderanno le funzioni che puoi aggiungere al tuo ricevitore web. Ora puoi creare un'app per i mittenti su iOS, Android o web.