Créer la classe Ads Manager

Dans ads_manager.js, définissez une classe wrapper pour le StreamManager du SDK IMA qui effectue des requêtes de flux, obtient le fichier manifeste de série 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 de 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);
};

Envoyer une requête pour 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é d'actif personnalisée du flux. Testez votre application HbbTV à l'aide de l'exemple de flux de diffusion de pod DASH IMA avec les paramètres de flux suivants :

  • Code réseau : '21775744923'
  • Clé d'actif 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();
  var secretKey = getStreamSecretKeys();

  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';

  if (secretKey.STREAM_CREATE_SECRET) {
    var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;
    var params = {
      custom_asset_key: customAssetKey,
      exp: expirationTime,
      network_code: networkCode
    };
    streamRequest.authToken =
        this.generateAuthToken(params, secretKey.STREAM_CREATE_SECRET);
    debugView.log('AdsManager: make Auth-PodStreamRequest');
  } else {
    debugView.log('AdsManager: make PodStreamRequest without auth');
  }

  this.streamManager.requestStream(streamRequest);
};

Écouter les événements de 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;
  }
};

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

Pour transmettre les informations sur l'événement emsg à IMA, créez la méthode AdManager.onEmsgEvent() à l'aide de la méthode StreamManager.processMetadata(). La classe de 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);
  }
};

Charger le fichier manifeste de série d'annonces

Créez la méthode AdManager.loadAdPodManifest() pour précharger le fichier manifeste de série d'annonces avec le lecteur vidéo. Créez une URL de fichier manifeste authentifiée à l'aide de la structure décrite dans la section Méthode : fichier manifeste de 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('AdsManager: No stream data available.');
    return;
  }

  var adBreakId = this.getAdBreakId();
  var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;

  var params = {
    ad_break_id: adBreakId,
    custom_asset_key: customAssetKey,
    exp: expirationTime,
    network_code: networkCode,
    pd: podDuration
  };

  var secretKey = getStreamSecretKeys();
  var token = this.generateAuthToken(params, secretKey.MANIFEST_SECRET);
  var encodedToken = encodeURIComponent(token);

  var manifestUrl = 'https://dai.google.com/linear/pods/v1/dash/network/' +
    networkCode + '/custom_asset/' + customAssetKey + '/stream/' +
    this.streamData.streamId + '/ad_break_id/' + adBreakId +
    '/manifest.mpd?pd=' + podDuration + '&auth-token=' + encodedToken;

  this.videoPlayer.preload(manifestUrl);
};

L' application exemple HbbTV utilise une valeur unique générée de manière aléatoire adBreakId. Dans les applications de production, la valeur adBreakId est une chaîne alphanumérique, par exemple ab-001, qui augmente de un pour chaque coupure publicitaire. Vérifiez que la valeur adBreakId est la même pour tous les spectateurs de la coupure publicitaire. Pour obtenir une valeur adBreakId, nous vous recommandons d'utiliser l' API de coupure publicitaire DAI. Dans un environnement de production, incluez la valeur adBreakId et la valeur 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