Configurare la classe Player

Nota: prima di procedere con questa guida, devi completare i passaggi descritti in Iniziare a utilizzare l'SDK IMA su HbbTV.

In video_player.js, definisci una classe wrapper del video player per avviare e controllare il player dash.js.

Configurare il player a banda larga

Definisci dove posizionare il player a banda larga nella tua app creando i tag video e wrapper:

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>
index.html

Crea il video player

Inizializza la classe del video player con variabili per gli elementi HTML, per il player dash.js e i callback che possono essere utilizzati da altri metodi di classe.

/**
 * Video player wrapper class to control ad creative playback with dash.js in
 * broadband.
 */
var VideoPlayer = function() {
  this.videoElement = document.querySelector('video');
  this.broadbandWrapper = document.getElementById('broadband-wrapper');
  this.player = dashjs.MediaPlayer().create();
  this.onAdPodEndedCallback = null;

  // Function passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.onCustomEventHandler = null;
  //  Scope (this) passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.customEventHandlerScope = null;

  // Function to remove all of player event listeners.
  this.cleanUpPlayerListener = null;
  debugView.log('Player: Creating dash.js player');
};
video_player.js

Definizione delle funzioni di controllo della riproduzione

Per mostrare il player dell'annuncio e allegare la visualizzazione video, crea il metodo VideoPlayer.play(). Successivamente, crea il metodo create VideoPlayer.stop() per gestire la pulizia al termine dei pod di annunci.

/** Starts playback of ad stream. */
VideoPlayer.prototype.play = function() {
  debugView.log('Player: Start playback');
  this.show();
  this.player.attachView(this.videoElement);
};

/** Stops ad stream playback and deconstructs player. */
VideoPlayer.prototype.stop = function() {
  debugView.log('Player: Request to stop player');
  if (this.cleanUpPlayerListener) {
    this.cleanUpPlayerListener();
  }
  this.player.reset();
  this.player.attachView(null);
  this.player.attachSource(null);
  this.player = null;
  this.hide();
};
video_player.js

Precaricare il manifest dello stream di annunci

Per assicurarti che gli annunci vengano caricati in modo sufficiente durante lo stream di contenuti e prima dell'inizio dell'interruzione pubblicitaria, utilizza VideoPlayer.preload() e VideoPlayer.isPreloaded().

1. Precaricare lo stream di annunci

Crea il metodo VideoPlayer.preload() per precaricare il manifest dello stream di annunci e generare un buffer di annunci prima di un'interruzione pubblicitaria. Devi aggiornare le impostazioni di streaming del player da 'cacheInitSegments' a true. L'aggiornamento delle impostazioni consente di memorizzare i segmenti di inizializzazione nella cache, evitando così ritardi quando si passa agli annunci.

/**
 * Starts ad stream prefetching into Media Source Extensions (MSE) buffer.
 * @param {string} url manifest url for ad stream playback.
 */
VideoPlayer.prototype.preload = function(url) {
  if (!this.player) {
    this.player = dashjs.MediaPlayer().create();
  }
  debugView.log('Player: init with ' + url);
  this.player.initialize(/* HTMLVideoElement */ null, url, /* autoplay */ true);

  this.player.updateSettings({
    'debug': {
      'logLevel': dashjs.Debug.LOG_LEVEL_WARNING,
      'dispatchEvent': true,  // flip to false to hide all debug events.
    },
    'streaming': {
      'cacheInitSegments': true,
    }
  });
  this.player.preload();
  this.attachPlayerListener();
  debugView.log('Player: Pre-loading into MSE buffer');
};
video_player.js

2. Controllare il buffer degli annunci precaricato

Crea il metodo VideoPlayer.isPreloaded() per verificare se è stato precaricato un buffer di annunci sufficiente rispetto a una soglia di buffer impostata nell'app:

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;
video_player.js

/**
 * Checks if the ad is preloaded and ready to play.
 * @return {boolean} whether the ad buffer level is sufficient.
 */
VideoPlayer.prototype.isPreloaded = function() {
  var currentBufferLevel = this.player.getDashMetrics()
      .getCurrentBufferLevel('video', true);
  return currentBufferLevel >= MIN_BUFFER_THRESHOLD;
};
video_player.js

Collega gli ascoltatori del player

Per aggiungere ascoltatori di eventi per l'evento del player dash.js, crea il metodo VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG e ERROR. Questo metodo gestisce anche gli eventi per l'URI ID schema, oltre a impostare la funzione di pulizia per rimuovere questi ascoltatori.

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
video_player.js

/** Attaches event listener for various dash.js events.*/
VideoPlayer.prototype.attachPlayerListener = function() {
  var playingHandler = function() {
    this.onAdPodPlaying();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
  var endedHandler = function() {
    this.onAdPodEnded();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
  var logHandler = function(e) {
    this.onLog(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['LOG'], logHandler);
  var errorHandler = function(e) {
    this.onAdPodError(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['ERROR'], errorHandler);

  var customEventHandler = null;
  if (this.onCustomEventHandler) {
    customEventHandler =
        this.onCustomEventHandler.bind(this.customEventHandlerScope);
    this.player.on(SCHEME_ID_URI, customEventHandler);
  }

  this.cleanUpPlayerListener = function() {
    this.player.off(
        dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
    this.player.off(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
    this.player.off(dashjs.MediaPlayer.events['LOG'], logHandler);
    this.player.off(dashjs.MediaPlayer.events['ERROR'], errorHandler);
    if (customEventHandler) {
      this.player.off(SCHEME_ID_URI, customEventHandler);
    }
  };
};
video_player.js

Impostare i callback degli eventi del player

Per gestire la riproduzione del pod di annunci in base agli eventi del player, crea i metodi VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded() e VideoPlayer.onAdPodError():

/**
 * Called when ad stream playback buffered and is playing.
 */
VideoPlayer.prototype.onAdPodPlaying = function() {
  debugView.log('Player: Ad Playback started');
};

/**
 * Called when ad stream playback has been completed.
 * Will call the restart of broadcast stream.
 */
VideoPlayer.prototype.onAdPodEnded = function() {
  debugView.log('Player: Ad Playback ended');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};

/**
 * @param {!Event} event The error event to handle.
 */
VideoPlayer.prototype.onAdPodError = function(event) {
  debugView.log('Player: Ad Playback error from dash.js player.');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};
video_player.js

Crea il set per l'evento onAdPodEnded

Imposta una funzione di callback che viene eseguita al termine di un pod di annunci creando il metodo VideoPlayer.setOnAdPodEnded(). La classe app usa questo metodo per riprendere la trasmissione dei contenuti dopo le interruzioni pubblicitarie.

/**
 * Sets a callback function for when an ad pod has ended.
 * @param {!Function} callback Callback function.
 */
VideoPlayer.prototype.setOnAdPodEnded = function(callback) {
  this.onAdPodEndedCallback = callback;
};
video_player.js

Gestire gli eventi di metadati dei flussi

Imposta una funzione di callback da eseguire in base agli eventi di emsg creando il metodo VideoPlayer.setEmsgEventHandler(). Per questa guida, includi il parametro scope quando richiami setEmsgEventHandler() al di fuori di video_player.js.

/**
 * Sets emsg event handler.
 * @param {!Function} customEventHandler Event handler.
 * @param {!Object} scope JS scope in which event handler function is called.
 */
VideoPlayer.prototype.setEmsgEventHandler = function(
    customEventHandler, scope) {
  this.onCustomEventHandler = customEventHandler;
  this.customEventHandlerScope = scope;
};
video_player.js

Mostrare e nascondere il video player per le interruzioni pubblicitarie

Per visualizzare il video player durante le interruzioni pubblicitarie e nasconderlo al termine dell'interruzione, crea i metodi VideoPlayer.show() e VideoPlayer.hide():

/** Shows the video player. */
VideoPlayer.prototype.show = function() {
  debugView.log('Player: show');
  this.broadbandWrapper.style.display = 'block';
};

/** Hides the video player. */
VideoPlayer.prototype.hide = function() {
  debugView.log('Player: hide');
  this.broadbandWrapper.style.display = 'none';
};
video_player.js

Successivamente, crea una classe Ads Manager per utilizzare l'SDK IMA per effettuare una richiesta di stream, ottenere un manifest del pod di annunci, ascoltare gli eventi stream IMA e passare gli eventi emsg all'SDK IMA.