Créer la classe Ads Manager

Dans ads_manager.js, définissez une classe wrapper pour le StreamManager du SDK IMA qui effectue des demandes de flux, obtient le fichier manifeste du bloc d'annonces, écoute les événements de flux IMA et transmet les événements emsg au SDK IMA.

Dans ads_manager.js, l'application exemple IMA HbbTV configure les méthodes suivantes :

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

Initialiser le gestionnaire d'annonces

Initialisez la classe du gestionnaire d'annonces et définissez des écouteurs pour les événements de flux IMA. Dans cet appel, définissez le gestionnaire d'événements emsg avec la méthode VideoPlayer.setEmsgEventHandler().

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

Demander un flux de série d'annonces

Créez la méthode AdManager.requestStream() pour créer un objet PodStreamRequest à l'aide de votre code réseau Google Ad Manager et de la clé de contenu personnalisé du flux. Testez votre application HbbTV à l'aide du flux de diffusion de pod DASH IMA exemple avec les paramètres de flux suivants :

  • Code réseau : '21775744923'
  • Clé d'élément personnalisée : '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

Écouter les événements du flux d'annonces

Créez la méthode AdManager.onStreamEvent() pour gérer la réponse de votre application aux événements de flux IMA, STREAM_INITIALIZED, AD_BREAK_STARTED et AD_BREAK_ENDED.

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

Gérer les métadonnées du flux d'annonces

Pour transmettre les informations de l'événement emsg à IMA, créez la méthode AdManager.onEmsgEvent() à l'aide de la méthode StreamManager.processMetadata(). La classe du lecteur vidéo appelle cette méthode avec la méthode VideoPlayer.setEmsgEventHandler().

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

Charger le fichier manifeste du pod d'annonces

Créez la méthode AdManager.loadAdPodManifest() pour précharger le fichier manifeste de la série d'annonces avec le lecteur vidéo. Créez l'URL du fichier manifeste en utilisant la structure de la section Méthode : fichier manifeste du pod DASH.

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

L'application exemple HbbTV utilise un podId unique généré de façon aléatoire. Dans les applications de production, podId est un entier qui commence à un et s'incrémente d'une unité pour chaque coupure publicitaire. Vérifiez que podId a la même valeur pour tous les spectateurs de l'insertion publicitaire. Pour obtenir un podId, nous vous recommandons d'utiliser l'API Early Ad Break Notifications (EABN). Dans un environnement de production, incluez podId et podDuration dans l'événement de flux HbbTV AD_BREAK_ANNOUNCE.

Créez ensuite la classe d'application principale pour votre application HbbTV qui interagit avec la diffusion HbbTV.

Précédent
Configurer la classe de lecteur
Suivant
Compiler la classe d'application