Le SDK IMA DAI est compatible avec l'intégration dans une application de lecteur vidéo HbbTV minimaliste. Il permet à la demande Google Ad Manager pour un flux d'annonces haut débit d'accompagner un flux de contenu de diffusion. Ce guide explique comment charger un fichier manifeste d'annonces en fonction des données d'événements publicitaires du flux de diffusion.
Pour afficher ou suivre un exemple d'intégration terminé, téléchargez l'application exemple linéaire HbbTV avec le SDK IMA pour HTML5 DAI. Pour prendre en charge les anciens appareils TV, ce guide et l'exemple d'application GitHub sont en JavaScript ES5.
Pour savoir comment intégrer d'autres plates-formes non HbbTV, consultez SDK Interactive Media Ads.
Prérequis
Avant de poursuivre ce guide, vérifiez que vous disposez des éléments suivants :
- Pour utiliser IMA DAI, vous devez disposer d'un compte Ad Manager 360 Advanced. Si vous possédez un compte Ad Manager, contactez votre responsable de compte pour en savoir plus. Pour savoir comment vous inscrire à Ad Manager, consultez le Centre d'aide Ad Manager.
- Application HbbTV interagissant avec l'objet de diffusion pour la lecture multimédia. Pour en savoir plus, consultez HbbTV Broadcast AV object.
- Une version de dash.js compatible avec le préchargement. Nous vous recommandons d'utiliser la version 4.6.0 ou ultérieure.
- Un serveur Web pour héberger l'application.
- Un environnement de test avec un flux de diffusion DVB. Pour obtenir des instructions détaillées sur la configuration de votre environnement de test, consultez Exécuter une application HbbTV.
- Flux de diffusion : préparez un flux de diffusion contenant des données personnalisées de table d'informations sur l'application (AIT). Vous avez également besoin d'un moyen de transmettre le flux de diffusion pour qu'il soit reçu par le téléviseur. Vous pouvez utiliser un modulateur DVB pour transmettre le flux de diffusion ou d'autres méthodes.
- Serveur Web : hébergez l'application HbbTV sur un serveur Web accessible par le téléviseur.
- Événement de diffusion en direct de type Fichier manifeste de la diffusion de séries d'annonces. Pour créer l'événement, consultez Configurer un flux en direct pour l'insertion dynamique d'annonce.
Créer un flux de diffusion compatible
Votre application HbbTV utilise broadcastContainer.addStreamEventListener() pour écouter les événements de flux HbbTV dans votre flux de diffusion. Pour charger et lire correctement les annonces, vous devez configurer votre flux de diffusion avec les types d'événements suivants afin d'inclure la charge utile de chaîne JSON associée :
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"}
Pour ces événements, incluez une charge utile de chaîne JSON avec streamEvent.type. Pour prendre en charge le préchargement des annonces, l'événement AD_BREAK_EVENT_ANNOUNCE doit inclure streamEvent.duration et streamEvent.offset. Pour en savoir plus, consultez Écouter les événements de flux HbbTV.
Pour configurer votre flux de diffusion, consultez l'exemple de flux de transport MPEG multiplexé.
Pour utiliser l'exemple de flux, vous devez mettre à jour l'URL du tableau d'informations sur l'application pour votre propre configuration de flux.
Créer un événement de diffusion en direct avec un pod
Pour diffuser des annonces dans votre application HbbTV, vous avez besoin d'un événement de diffusion en direct avec diffusion de séries d'annonces. Pour savoir comment configurer l'événement, consultez Configurer un flux en direct pour l'insertion dynamique d'annonce. Pour accéder au flux que vous avez configuré, l'application doit disposer des variables suivantes :
NETWORK_CODE: code de réseau Ad Manager pour demander des annonces.CUSTOM_ASSET_KEY: clé d'élément personnalisé Ad Manager générée lors de la configuration du flux en direct pour l'insertion dynamique d'annonces.
Créer la structure de fichiers de l'application
Ce guide utilise une structure de fichiers semblable à celle de l'exemple d'application IMA HbbTV. Pour suivre ce guide, créez les fichiers suivants :
index.html: index HTML de votre application.Style.css: style CSS de votre application.application.js: point d'entrée JS principal. Gère l'état de lecture et les coupures publicitaires.video_player.js: gère le lecteur dash.js utilisé pour la lecture des annonces.ads_manager.js: gère la configuration IMA, la demande de flux et la gestion des événements.
ads_manager.js configure le SDK IMA DAI. Les composants suivants implémentent le SDK IMA DAI :
PodStreamRequest: objet qui définit une demande de flux aux serveurs publicitaires de Google.StreamManager: Objet qui gère les flux d'insertion dynamique d'annonces et les interactions avec le backend DAI. Le gestionnaire de flux gère également les pings de suivi et transmet les événements de flux et d'annonces à l'éditeur.
Pour obtenir des instructions détaillées sur la configuration de votre environnement de test, consultez ce guide sur l'exécution d'une application HbbTV.
Charger le SDK IMA DAI et DASH.js
Pour commencer la lecture du flux d'annonces de diffusion, chargez le SDK IMA DAI et dash.js dans votre application. Avant la balise application.js, ajoutez dash.js et le framework IMA à l'aide de balises de script dans index.html.
Créez ensuite une classe de wrapper de lecteur vidéo pour lancer et contrôler le lecteur dash.js.