Ad Manager-Klasse erstellen

Definieren Sie in ads_manager.js eine Wrapper-Klasse für den IMA SDK StreamManager, mit der Streamanfragen gesendet, das Ad-Pod-Manifest abgerufen, IMA-Streamereignisse abgehört und emsg-Ereignisse an das IMA SDK übergeben werden.

In ads_manager.js werden in der IMA HbbTV-Beispiel-App die folgenden Methoden eingerichtet:

  • requestStream()
  • onStreamEvent()
  • onEmsgEvent()
  • loadAdPodManifest()

Anzeigenmanager initialisieren

Initialisieren Sie die Ads Manager-Klasse und legen Sie Listener für die IMA-Streamereignisse fest. Legen Sie in diesem Aufruf den emsg-Event-Handler mit der Methode VideoPlayer.setEmsgEventHandler() fest.

werden in Ad Manager möglicherweise inkompatible Anzeigen ausgeliefert. 
/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};
ads_manager.js

Anfrage für einen Ad-Pod-Stream stellen

Erstellen Sie die AdManager.requestStream()-Methode, um ein PodStreamRequest-Objekt mit Ihrem Google Ad Manager-Netzwerkcode und dem benutzerdefinierten Asset-Schlüssel des Streams zu erstellen. Testen Sie Ihre HbbTV-App mit dem IMA-Beispielstream für die Bereitstellung von DASH-Pods mit den folgenden Streamparametern:

  • Netzwerkcode: '21775744923'
  • Benutzerdefinierter Assetschlüssel: 'hbbtv-dash'
/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function(networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';
  debugView.log('AdsManager: make PodStreamRequest');
  this.streamManager.requestStream(streamRequest);
};
ads_manager.js

Auf Ereignisse im Anzeigenstream warten

Erstellen Sie die Methode AdManager.onStreamEvent(), um die Reaktion Ihrer App auf die IMA-Streamereignisse STREAM_INITIALIZED, AD_BREAK_STARTED und AD_BREAK_ENDED zu verarbeiten.

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};
ads_manager.js

Metadaten des Anzeigenstreams verarbeiten

Wenn Sie die emsg-Ereignisinformationen an IMA übergeben möchten, erstellen Sie die AdManager.onEmsgEvent()-Methode mit der StreamManager.processMetadata()-Methode. Die Videoplayer-Klasse ruft diese Methode mit der Methode VideoPlayer.setEmsgEventHandler() auf.

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};
ads_manager.js

Ad-Pod-Manifest laden

Erstellen Sie die AdManager.loadAdPodManifest()-Methode, um das Anzeigen-Pod-Manifest mit dem Videoplayer vorab zu laden. Erstellen Sie die Manifest-URL anhand der Struktur in Methode: DASH-Pod-Manifest.

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest =
    function(networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('IMA SDK: No DAI pod session registered.');
    return;
  }

  var MANIFEST_BASE_URL = 'https://dai.google.com/linear/pods/v1/dash/network/';
  // Method: DASH pod manifest reference docs:
  // https://developers.google.com/ad-manager/dynamic-ad-insertion/api/pod-serving/reference/live#method_dash_pod_manifest
  var manifestUrl = MANIFEST_BASE_URL + networkCode + '/custom_asset/' +
    customAssetKey + '/stream/' + this.streamData.streamId + '/pod/' +
    this.getPodId() + '/manifest.mpd?pd=' + podDuration;
  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

In der HbbTV-Beispiel-App wird ein zufällig generiertes, eindeutiges podId verwendet. In Produktions-Apps ist podId eine Ganzzahl, die mit 1 beginnt und für jede Werbeunterbrechung um 1 erhöht wird. Prüfen Sie, ob podId für alle Zuschauer der Werbeunterbrechung derselbe Wert ist. Wir empfehlen, für podId die Early Ad Break Notification (EABN) API zu verwenden. In einer Produktionsumgebung müssen Sie podId und podDuration in das HbbTV-Streamereignis AD_BREAK_ANNOUNCE einfügen.

Erstellen Sie als Nächstes die Hauptanwendungsklasse für Ihre HbbTV-App, die mit der HbbTV-Übertragung interagiert.

Zurück
Player-Klasse einrichten
Weiter
Anwendungsklasse erstellen