L'SDK IMA DAI supporta l'integrazione in un'app video player HbbTV minima. L'SDK IMA DAI consente la domanda di Google Ad Manager di uno stream di annunci a banda larga da accompagnare a uno stream di contenuti trasmessi. Questa guida illustra il caricamento di un manifest dell'annuncio in base ai dati sugli eventi correlati agli annunci dello stream di trasmissione.
Per visualizzare o seguire un'integrazione di esempio completata, scarica l'app di esempio HbbTV lineare con SDK DAI IMA HTML5. 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, assicurati di avere quanto segue:
- Per utilizzare IMA DAI, devi disporre di un account Ad Manager 360 Advanced. Se hai un account Ad Manager, contatta il tuo account manager per maggiori dettagli. Per informazioni su come registrarti ad Ad Manager, visita il Centro assistenza Ad Manager.
- Un'app HbbTV che interagisce con l'oggetto di trasmissione per la riproduzione di 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 successiva.
- 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 la sezione Eseguire un'applicazione HbbTV.
- Stream di trasmissione: prepara uno stream di trasmissione contenente dati personalizzati della tabella AIT (Application Information Table). Inoltre, devi avere 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 in live streaming di 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 nel tuo 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 di 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 ulteriori informazioni, consulta
Ascoltare gli eventi 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 configurazione del tuo stream.
Creare un pod che pubblica un evento di live streaming
Per pubblicare annunci nella tua app HbbTV, devi avere un evento di pubblicazione di pod in live streaming. Per informazioni sulla configurazione dell'evento, consulta Configurare un live streaming per DAI. Per accedere allo stream 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.
Crea la struttura del file dell'applicazione
Questa guida utilizza una struttura di file simile a quella dell'app di esempio IMA HbbTV. Per seguire questa guida, assicurati di creare i seguenti file:
index.html: indice HTML per la tua app.Style.css: stili CSS per la tua 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 inserzione di annunci dinamici e le interazioni con il backend DAI. Il gestore dello stream 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.
Carica l'SDK IMA DAI e DASH.js
Per iniziare la riproduzione dello stream di annunci trasmessi, carica l'SDK DAI IMA 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.
<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script> <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
Successivamente, crea una classe wrapper del video player per avviare e controllare il Media Player dash.js.