Anwendungsklasse erstellen

Erstelle in application.js die Hauptklasse für deine HbbTV-App, die mit der HbbTV-Übertragung interagiert. Diese Klasse interagiert mit broadcastAppManager und broadcastContainer. Ein Beispiel für eine ähnliche Klasse finden Sie unter Broadcast-A/V-Objekt verarbeiten.

Ändern Sie diese HbbTV-Basis-App so, dass ein IMA-Stream angefordert und auf Ereignisse für Werbeunterbrechungen reagiert wird.

Anwendung initialisieren

Initialisieren Sie die Anwendungsklasse in application.js, richten Sie broadcastAppManager und broadcastContainer gemäß dem Tutorial Broadcast-A/V-Objekt verarbeiten ein. Initialisieren Sie anschließend neue VideoPlayer- und AdManager-Objekte.

/** 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

IMA-Streamanfrage stellen

Stellen Sie in der Methode HbbTVApp.onPlayStateChangeEvent() eine Streamanfrage als Reaktion auf das Umschalten der App zu PRESENTING_PLAYSTATE. Bei diesem Ansatz wird Ihre App darauf vorbereitet, das Manifest des Anzeigen-Pods als Reaktion auf ein AD_BREAK_EVENT_ANNOUNCE-Ereignis zu laden.

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

Wenn auf Ihrem Gerät das Ereignis PlayStateChange des Broadcast-Containers nicht richtig ausgegeben wird, können Sie mit der Funktion setInterval() nach Änderungen des Wiedergabestatus suchen:

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

Auf HbbTV-Stream-Ereignisse warten

Erstellen Sie die Methode HbbTVApp.onStreamEvent(), um auf die Ereignisse der Werbeunterbrechung adBreakAnnounce, adBreakStart und adBreakEnd zu warten:

/**
 * 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

HbbTV-Streamereignisse verarbeiten

Führen Sie die folgenden Schritte aus, um die HbbTV-Streamereignisse zu verarbeiten:

  1. Um das Ad-Pod-Manifest als Reaktion auf das adBreakAnnounce-Ereignis zu laden, erstellen Sie die HbbTVApp.onAdBreakAnnounce()-Methode:

    /**
 * 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. Wenn Sie während Werbeunterbrechungen zur Wiedergabe des Anzeigenstreams wechseln möchten, erstellen Sie die Methode 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. Um zur Übertragung des Inhalts zurückzukehren, erstellen Sie die Methode 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

Sie fordern jetzt IMA SDK-Anzeigenblöcke in Ihrer HbbTV-App an und präsentieren sie. Wenn Sie Ihre App mit einer fertigen Beispiel-App vergleichen möchten, sehen Sie sich das IMA HbbTV-Beispiel auf GitHub an.

Zurück
Ad Manager-Klasse erstellen