Compiler la classe d'application

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 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);
};

Envoyer une requête 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 manifeste de série 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);
}

Si votre appareil n'émet pas correctement l'événement PlayStateChange du conteneur de diffusion, utilisez la fonction setInterval() pour vérifier les changements d'é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);
  }
};

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 de série 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);
};

  2. Pour passer à la lecture du flux publicitaire 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();
};

  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();
};

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

Précédent
Créer la classe Ads Manager