Creare il corso Gestione annunci

In ads_manager.js, definisci una classe wrapper per StreamManager dell'SDK IMA che effettui richieste di stream, ottenga il manifest del pod di annunci, ascolti gli eventi stream IMA e trasmetta gli eventi emsg all'SDK IMA.

In ads_manager.js, l'app di esempio IMA HbbTV configura i seguenti metodi:

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

Inizializza Gestione annunci

Inizializza la classe AdsManager e imposta i listener per gli eventi stream IMA. In questa chiamata, imposta il gestore di eventi emsg con il metodo 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

Richiedere lo stream di un pod di annunci

Crea il metodo AdManager.requestStream() per creare un oggetto PodStreamRequest utilizzando il codice di rete di Google Ad Manager e la chiave dell'asset personalizzato dello stream. Testa l'app HbbTV utilizzando lo stream per la pubblicazione di pod DASH di esempio IMA con i seguenti parametri di streaming:

  • Codice rete: '21775744923'
  • Chiave asset personalizzata: '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

Ascolta gli eventi dello stream di annunci

Crea il metodo AdManager.onStreamEvent() per gestire la risposta della tua app agli eventi stream IMA STREAM_INITIALIZED, AD_BREAK_STARTED e 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

Gestire i metadati degli stream di annunci

Per passare le informazioni sull'evento emsg a IMA, crea il metodo AdManager.onEmsgEvent() utilizzando il metodo StreamManager.processMetadata(). La classe del video player chiama questo metodo con il metodo 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

Carica il manifest del pod di annunci

Crea il metodo AdManager.loadAdPodManifest() per precaricare il manifest del pod di annunci con il video player. Costruisci l'URL del manifest utilizzando la struttura in Metodo: manifest del 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'app di esempio HbbTV utilizza un podId univoco generato in modo casuale. Nelle app di produzione, podId è un intero che inizia da 1 e aumenta di 1 per ogni interruzione pubblicitaria. Assicurati che podId sia lo stesso valore per tutti gli spettatori dell'interruzione pubblicitaria. Per ricevere un podId, ti consigliamo di utilizzare l'API Notifiche di interruzione pubblicitaria anticipata (EABN). In un ambiente di produzione, includi podId e podDuration nell'evento di streaming HbbTV AD_BREAK_ANNOUNCE.

Poi, crea la classe dell'applicazione principale per la tua app HbbTV che interagisce con la trasmissione HbbTV.

Indietro
Configurare la classe Player
Avanti
crea la classe dell'applicazione