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.
Tipo di dispositivo | Contenuti audio | Contenuti degli annunci video |
---|---|---|
Chromecast | ||
Chromecast con Google TV | ||
Smart display | ||
telecomando per smart display | 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.