Configurer la classe de lecteur

Remarque : Avant de continuer avec ce guide, vous devez suivre les étapes décrites dans Premiers pas avec le SDK IMA sur HbbTV.

Dans video_player.js, définissez une classe wrapper de lecteur vidéo pour initialiser et contrôler le lecteur dash.js.

Configurer le lecteur haut débit

Définissez l'emplacement du lecteur haut débit dans votre application en créant des tags vidéo et d'encapsulation :

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

Créer le lecteur vidéo

Initialisez la classe du lecteur vidéo avec des variables pour les éléments HTML, le lecteur dash.js et les rappels que d'autres méthodes de classe peuvent utiliser.

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

Définir les fonctions de commande de lecture

Pour afficher le lecteur d'annonces et associer la vue vidéo, créez la méthode VideoPlayer.play(). Créez ensuite la méthode VideoPlayer.stop() pour gérer le nettoyage une fois les blocs d'annonces terminés.

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

Précharger le fichier manifeste du flux d'annonces

Pour vérifier que les annonces sont suffisamment chargées pendant le flux de contenu et avant le début de la coupure publicitaire, utilisez VideoPlayer.preload() et VideoPlayer.isPreloaded().

1. Précharger le flux d'annonces

Créez la méthode VideoPlayer.preload() pour précharger le fichier manifeste du flux d'annonces et constituer un tampon d'annonces avant une coupure publicitaire. Vous devez définir les paramètres de streaming du lecteur 'cacheInitSegments' sur true. En mettant à jour les paramètres, vous activez la mise en cache des segments initiaux, ce qui évite les retards lors du passage aux annonces.

/**
 * 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. Vérifier le tampon d'annonces préchargées

Créez la méthode VideoPlayer.isPreloaded() pour vérifier si suffisamment de tampon d'annonces a été préchargé par rapport à un seuil de tampon défini dans l'application :

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

Associer des écouteurs au lecteur

Pour ajouter des écouteurs d'événements pour l'événement du lecteur dash.js, créez la méthode VideoPlayer.attachPlayerListener() : PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG et ERROR. Cette méthode gère également les événements pour l'URI de l'ID de schéma, en plus de définir la fonction de nettoyage pour supprimer ces écouteurs.

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

Définir des rappels d'événements du lecteur

Pour gérer la lecture de la série d'annonces en fonction des événements du lecteur, créez les méthodes VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded() et 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

Créez le setter pour l'événement onAdPodEnded.

Définissez une fonction de rappel qui s'exécute lorsqu'un bloc d'annonces se termine en créant la méthode VideoPlayer.setOnAdPodEnded(). La classe d'application utilise cette méthode pour reprendre la diffusion de contenu après les pauses publicitaires.

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

Gérer les événements de métadonnées de flux

Définissez une fonction de rappel qui s'exécute en fonction des événements emsg en créant la méthode VideoPlayer.setEmsgEventHandler(). Pour ce guide, incluez le paramètre scope, car vous appelez setEmsgEventHandler() en dehors de 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

Afficher et masquer le lecteur vidéo pour les coupures publicitaires

Pour afficher le lecteur vidéo pendant les coupures publicitaires et le masquer une fois la coupure publicitaire terminée, créez les méthodes VideoPlayer.show() et 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

Ensuite, créez une classe de gestionnaire d'annonces pour utiliser le SDK IMA afin d'envoyer une demande de flux, obtenir un fichier manifeste de groupe d'annonces, écouter les événements de flux IMA et transmettre les événements emsg au SDK IMA.