Configurer la classe de lecteur

Remarque : Avant de poursuivre ce guide, vous devez suivre la procédure décrite dans Premiers pas avec le SDK IMA sur HbbTV.

Dans video_player.js, définissez une classe wrapper de lecteur vidéo pour lancer 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 wrapper:

<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 des commandes de lecture

Pour afficher le lecteur d'annonces et joindre la vue vidéo, créez la méthode VideoPlayer.play(). Ensuite, créez la méthode de création VideoPlayer.stop() pour gérer le nettoyage une fois les séries d'annonces terminées.

/** 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 vous assurer 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 créer un tampon d'annonces avant une coupure publicitaire. Vous devez mettre à jour les paramètres de streaming du lecteur 'cacheInitSegments' sur true. En mettant à jour les paramètres, vous activez le cache des segments d'initialisation, 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é

Créez la méthode VideoPlayer.isPreloaded() pour vérifier si suffisamment de tampons d'annonces ont été préchargés 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 de lecteur

Pour ajouter des écouteurs d'événements à l'événement dash.js du lecteur, 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 d'ID du 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éer le setter pour l'événement onAdPodEnded

Créez une fonction de rappel qui s'exécute à la fin d'une série d'annonces en créant la méthode VideoPlayer.setOnAdPodEnded(). La classe d'application utilise cette méthode pour reprendre la diffusion du contenu après les coupures 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 Ads Manager pour utiliser le SDK IMA afin d'envoyer une requête de flux, d'obtenir un fichier manifeste de série d'annonces, d'écouter les événements de flux IMA et de transmettre les événements emsg au SDK IMA.