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 audio/vidéo de diffusion.

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

Initialiser l'application

Initialisez la classe d'application dans application.js, configurez broadcastAppManager et broadcastContainer en suivant le tutoriel Gérer l'objet audio/vidéo de diffusion. Ensuite, initialisez 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 de conteneur de diffusion PlayStateChange, 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);
  }
};
application.js

Gérer les événements de flux HbbTV

Pour gérer les événements du 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 pauses 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 au contenu diffusé, 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 pods d'annonces du SDK IMA dans votre application HbbTV. Pour comparer votre application à un exemple d'application terminé, consultez l'exemple IMA HbbTV sur GitHub.

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