Créer la classe Ads Manager

Dans ads_manager.js, définissez une classe de wrapper pour le StreamManager du SDK IMA qui envoie des requêtes de flux, récupère le fichier manifeste du pod 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 HbbTV IMA configure les méthodes suivantes :

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

Initialiser Ads Manager

Initialisez la classe AdsManager et définissez des écouteurs pour les événements de flux IMA. Dans cet appel, définissez le gestionnaire d'événements emsg à l'aide de 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

Envoyer une demande 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'élément personnalisé 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 de 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 des é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;
  }
};
ads_manager.js

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

Pour transmettre les informations d'événement de message à 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 de la série 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 à l'aide de la structure décrite dans 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 manière aléatoire. Dans les applications de production, podId est un entier qui commence à un et augmente d'une unité pour chaque coupure publicitaire. Assurez-vous que la valeur podId est identique pour tous les spectateurs de la coupure publicitaire. Pour obtenir un podId, nous vous recommandons d'utiliser l'API Early Ad Break Notification (EABN). Dans un environnement de production, incluez podId et podDuration dans l'événement de flux HbbTV AD_BREAK_ANNOUNCE.

Ensuite, créez la classe d'application principale de votre application HbbTV qui interagit avec la diffusion HbbTV.

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