Le SDK IMA DAI permet l'intégration dans une application de lecteur vidéo HbbTV minimale. Le SDK IMA DAI permet à Google Ad Manager de demander un flux d'annonces haut débit pour accompagner un flux de contenu diffusé. Ce guide explique comment charger un fichier manifeste d'annonces en fonction des données d'événement d'annonce du flux de diffusion.
Pour afficher ou suivre un exemple d'intégration terminée, téléchargez l'application exemple linéaire HbbTV avec le SDK IMA HTML5 DAI. Pour prendre en charge les anciens appareils TV, ce guide et l'application exemple GitHub sont en JavaScript ES5.
Pour en savoir plus sur l'intégration à d'autres plates-formes autres que HbbTV, consultez la section SDK Interactive Media Ads.
Conditions préalables
Avant de continuer à suivre ce guide, assurez-vous de disposer des éléments suivants :
- Pour utiliser la fonctionnalité 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 en savoir plus sur l'inscription à Ad Manager, consultez le Centre d'aide Ad Manager.
- Une application HbbTV qui interagit avec l'objet de diffusion pour la lecture multimédia. Pour en savoir plus, consultez la section Objet AV de diffusion HbbTV.
- Version 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.
- 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 la section Exécuter une application HbbTV.
- Flux de diffusion : préparez un flux de diffusion contenant des données de table d'informations sur l'application (AIT) personnalisées. Vous devez également disposer 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 une diffusion 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 des é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 modifier l'URL de la table d'informations sur l'application pour votre propre configuration de flux.
Créer un pod diffusant un événement en direct
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ée 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 HbbTV IMA. Pour suivre ce guide, assurez-vous de créer les fichiers suivants :
index.html: index HTML de votre application.Style.css: style CSS pour votre applicationapplication.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 du SDK IMA, la demande de flux et la gestion des événements.
ads_manager.js configure le SDK IMA pour l'insertion dynamique d'annonces. Les composants suivants implémentent le SDK IMA DAI :
PodStreamRequest: objet qui définit une requête de flux vers les 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 transfère les événements de flux et d'annonce à 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 lancer la lecture d'un flux d'annonces diffusé, chargez le SDK IMA DAI et dash.js dans votre application. Avant le tag application.js, ajoutez dash.js et le framework IMA à l'aide de balises de script dans 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>
Ensuite, créez une classe de wrapper de lecteur vidéo pour lancer et contrôler le lecteur dash.js.