Compiler la classe d'application

Remarque :Avant de continuer avec ce guide, vous devez suivre la procédure décrite dans Créer la classe du gestionnaire d'annonces.

Dans application.js, créez la classe principale de votre application HbbTV qui interagit avec la diffusion HbbTV. Cette classe interagit avec broadcastAppManager et broadcastContainer. Pour obtenir un exemple de classe similaire, consultez la section Gérer l'objet a/v de diffusion.

Modifiez cette application HbbTV de base pour demander un flux IMA et répondre aux événements de coupure publicitaire.

Initialiser l'application

Initialisez la classe d'application dans application.js, configurez broadcastAppManager et broadcastContainer en suivant le tutoriel Gérer l'objet a/v de diffusion. Ensuite, lancez de nouveaux objets VideoPlayer et AdManager.

/** Main HbbTV Application. */
var HbbTVApp = function() {
  this.broadcastAppManager = document.getElementById('broadcast-app-manager');
  this.broadcastContainer = document.getElementById('broadcast-video');

  this.playState = -1; // -1 as null play state.

  try {
    this.applicationManager =
        this.broadcastAppManager.getOwnerApplication(document);
    this.applicationManager.show();
    this.broadcastContainer.bindToCurrentChannel();
    this.subscribedToStreamEvents = false;
    this.broadcastContainer.addEventListener(
        'PlayStateChange', this.onPlayStateChangeEvent.bind(this));

    debugView.log('HbbTVApp: App loaded');
    this.videoPlayer = new VideoPlayer();
    this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this));
  } catch (e) {
    debugView.log('HbbTVApp: No HbbTV device detected.');
    return;
  }

  this.adManager = new AdManager(this.videoPlayer);
};
application.js

Envoyer une demande de flux IMA

Dans la méthode HbbTVApp.onPlayStateChangeEvent(), envoyez une requête de flux en réponse au passage de l'application à PRESENTING_PLAYSTATE. Cette approche prépare votre application à charger le fichier manifeste du pod d'annonces en réponse à un événement AD_BREAK_EVENT_ANNOUNCE.

if (!this.subscribedToStreamEvents &&
    this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
  this.subscribedToStreamEvents = true;
  this.broadcastContainer.addStreamEventListener(
      STREAM_EVENT_URL, 'eventItem', function(event) {
        this.onStreamEvent(event);
      }.bind(this));
  debugView.log('HbbTVApp: Subscribing to stream events.');
  this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
}
application.js

Si votre appareil n'émet pas correctement l'événement PlayStateChange du conteneur de diffusion, utilisez la fonction setInterval() pour vérifier les modifications de l'état de lecture:

setInterval(function() {
      if (!subscribedToStreamEvents &&
            this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
        subscribedToStreamEvents = true;
        this.broadcastContainer.addStreamEventListener(
            STREAM_EVENT_URL, 'eventItem', function(event) {
              this.onStreamEvent(event);
            }.bind(this));
        debugView.log('Subscribing to stream events');
        this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
      }
      …

Écouter les événements de flux HbbTV

Créez la méthode HbbTVApp.onStreamEvent() pour écouter les événements de coupure publicitaire adBreakAnnounce, adBreakStart et adBreakEnd :

/**
 * Callback for HbbTV stream event.
 * @param {!Event} event Stream event payload.
 */
HbbTVApp.prototype.onStreamEvent = function(event) {
  var eventData = JSON.parse(event.text);
  var eventType = eventData.type;
  if (eventType == AD_BREAK_EVENT_ANNOUNCE) {
    this.onAdBreakAnnounce(eventData);
  } else if (eventType == AD_BREAK_EVENT_START) {
    this.onAdBreakStart(eventData);
  } else if (eventType == AD_BREAK_EVENT_END) {
    this.onAdBreakEnd(eventData);
  }
};
application.js

Gérer les événements de flux HbbTV

Pour gérer les événements de flux HbbTV, procédez comme suit:

1. Pour charger le fichier manifeste du pod d'annonces en réponse à l'événement adBreakAnnounce, créez la méthode HbbTVApp.onAdBreakAnnounce() :

   /**
    * Callback function on ad break announce stream event.
    * @param {!Event} event HbbTV stream event payload.
    */
   HbbTVApp.prototype.onAdBreakAnnounce = function(event) {
     var eventType = event.type;
     var eventDuration = event.duration;
     var eventOffset = event.offset;
     debugView.log(
         'HbbTV event: ' + eventType + ' duration: ' + eventDuration +
         's offset: ' + eventOffset + 's');
     this.adManager.loadAdPodManifest(NETWORK_CODE, CUSTOM_ASSET_KEY, eventDuration);
   };
   application.js

2. Pour passer à la lecture du flux d'annonces pendant les coupures publicitaires, créez la méthode HbbTVApp.onAdBreakStart() :

   /**
    * Callback function on ad break start stream event.
    * @param {!Event} event HbbTV stream event payload.
    */
   HbbTVApp.prototype.onAdBreakStart = function(event) {
     debugView.log('HbbTV event: ' + event.type);
     if (!this.videoPlayer.isPreloaded()) {
       debugView.log('HbbTVApp: Switch aborted. ' +
                     'The ad preloading buffer is insufficient.');
       return;
     }
     this.stopBroadcast();
     this.videoPlayer.play();
   };
   application.js

3. Pour revenir à la diffusion de contenu, créez la méthode HbbTVApp.onAdBreakEnd():

   /**
    * Callback function on ad break end stream event.
    * @param {!Event} event HbbTV stream event payload.
    */
   HbbTVApp.prototype.onAdBreakEnd = function(event) {
     debugView.log('HbbTV event: ' + event.type);
     this.videoPlayer.stop();
     this.resumeBroadcast();
   };
   application.js

Vous demandez et affichez maintenant des séries d'annonces SDK IMA dans votre application HbbTV. Pour comparer votre application à un exemple d'application terminé, consultez l'exemple IMA pour HbbTV sur GitHub.