L'SDK IMA DAI supporta l'integrazione in un'app di video player HbbTV minima. L'SDK IMA DAI consente la domanda di Google Ad Manager per uno stream di annunci a banda larga che accompagna uno stream di contenuti di trasmissione. Questa guida illustra il caricamento di un manifest di annunci basato sui dati degli eventi degli annunci dallo stream di trasmissione.
Per visualizzare o seguire un'integrazione di esempio completata, scarica l' app di esempio lineare HbbTV con l'SDK IMA per HTML5 DAI. Per supportare i dispositivi TV meno recenti, questa guida e l'app di esempio di GitHub sono in JavaScript ES5.
Per informazioni sull'integrazione con altre piattaforme non HbbTV, consulta SDK Interactive Media Ads.
Prerequisiti
Prima di continuare con questa guida, verifica di avere quanto segue:
- Per utilizzare IMA DAI, devi avere un account Ad Manager 360 Advanced. Se hai un account Ad Manager, contatta il tuo account manager per maggiori dettagli. Per informazioni sulla registrazione ad Ad Manager, visita il Centro assistenza Ad Manager.
- Un'app HbbTV che interagisce con l'oggetto di trasmissione per la riproduzione dei contenuti multimediali. Per maggiori dettagli, consulta Oggetto AV di trasmissione HbbTV.
- Una versione di dash.js che supporta il precaricamento. Ti consigliamo di utilizzare la versione 4.6.0 o successive.
- Un server web per ospitare l'applicazione.
- Un ambiente di test con uno stream di trasmissione DVB. Per istruzioni dettagliate
sulla configurazione dell'ambiente di test, consulta
Eseguire un'applicazione HbbTV.
- Stream di trasmissione: prepara uno stream di trasmissione contenente dati personalizzati della tabella delle informazioni sull'applicazione (AIT). È inoltre necessario un modo per trasmettere lo stream di trasmissione per la ricezione da parte della TV. Puoi utilizzare un modulatore DVB per trasmettere lo stream di trasmissione o altri metodi.
- Server web: ospita l'applicazione HbbTV su un server web accessibile dalla TV.
- Un evento di live streaming con tipo Manifest pubblicazione pod. Per creare l'evento, consulta Configurare un live streaming per DAI.
Creare uno stream di trasmissione compatibile
L'app HbbTV utilizza broadcastContainer.addStreamEventListener() per ascoltare gli eventi dello stream HbbTV nello stream di trasmissione. Per caricare e riprodurre correttamente gli annunci, devi configurare lo stream di trasmissione con i seguenti tipi di eventi per includere il payload della stringa JSON associata:
AD_BREAK_EVENT_ANNOUNCE-{"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}AD_BREAK_EVENT_START-{"type":"adBreakStart"}AD_BREAK_EVENT_END-{"type":"adBreakEnd"}
Per questi eventi, includi un payload della stringa JSON con streamEvent.type. Per supportare il precaricamento degli annunci, l'evento AD_BREAK_EVENT_ANNOUNCE deve includere streamEvent.duration e streamEvent.offset. Per saperne di più, consulta
Ascoltare gli eventi dello stream HbbTV.
Per configurare lo stream di trasmissione, consulta l'esempio
di stream di trasporto MPEG multiplexato.
Per utilizzare lo stream di esempio, devi aggiornare l'URL della tabella delle informazioni sull'applicazione per la tua configurazione dello stream.
Creare un evento di live streaming di pubblicazione pod
Per pubblicare annunci nella tua app HbbTV, devi avere un evento di live streaming di pubblicazione pod. Per informazioni sulla configurazione dell'evento, consulta Configurare un live streaming per DAI. Per accedere allo stream che hai configurato, l'app deve avere le seguenti variabili:
NETWORK_CODE: il codice di rete Ad Manager per la richiesta di annunci.CUSTOM_ASSET_KEY: la chiave asset personalizzata di Ad Manager generata durante la procedura di configurazione del live streaming per DAI.
Creare la struttura dei file dell'applicazione
Questa guida utilizza una struttura di file simile all' app di esempio IMA HbbTV. Per seguire questa guida, crea i seguenti file:
index.html: indice HTML per l'app.Style.css: stile CSS per l'app.application.js: punto di ingresso JS principale. Gestisce lo stato di riproduzione e le interruzioni pubblicitarie.video_player.js: gestisce il player dash.js utilizzato per la riproduzione degli annunci.ads_manager.js: gestisce la configurazione di IMA, la richiesta di stream e la gestione degli eventi.
ads_manager.js configura l'SDK IMA DAI. I seguenti componenti implementano l'SDK IMA DAI:
PodStreamRequest: un oggetto che definisce una richiesta di stream ai server pubblicitari di Google.StreamManager: un oggetto che gestisce gli stream di inserimento di annunci dinamici e le interazioni con il backend DAI. Stream Manager gestisce anche i ping di monitoraggio e inoltra gli eventi di stream e annunci al publisher.
Per istruzioni dettagliate sulla configurazione dell'ambiente di test, consulta questa guida sull'esecuzione di un'applicazione HbbTV.
Caricare l'SDK IMA DAI e DASH.js
Per avviare la riproduzione dello stream di annunci di trasmissione, carica l'SDK IMA DAI e dash.js nella tua app. Prima del tag application.js, aggiungi dash.js e il framework IMA utilizzando i tag script in index.html.
Poi, crea una classe wrapper del video player per avviare e controllare il player dash.js.