Cette page a été traduite par l'API Cloud Translation.

Automatiser les playlists d'annonces

Le SDK IMA pour HTML5 est compatible avec les playlists d'annonces entièrement automatisées. Cette fonctionnalité insère des coupures publicitaires dans le contenu, comme indiqué dans Google Ad Manager lors de la diffusion de vos annonces. Il simplifie également considérablement le code du lecteur vidéo nécessaire pour prendre en charge les coupures publicitaires, y compris les annonces pré-roll, mid-roll et post-roll.

Lors de la création de AdsManager, un objet contentPlayback est transmis à l'aide de l'appel getAdsManager. Cet objet doit comporter une propriété currentTime qui renvoie la position actuelle de la tête de lecture de la vidéo. Si vous utilisez un élément video HTML5 pour afficher votre contenu, vous pouvez simplement transmettre cet élément au SDK. Cet objet permet de suivre la progression de la lecture du contenu afin que les coupures publicitaires soient automatiquement insérées aux heures spécifiées dans Ad Manager. Vous devez également indiquer au SDK que vous souhaitez qu'il gère l'état du contenu en votre nom.
```
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for contentPlayback.
```

Pour vous assurer que les post-rolls sont lus, vous devez indiquer au SDK quand votre contenu est terminé. Cette opération est un peu délicate, car dans certains cas, le SDK utilise votre lecteur vidéo pour diffuser des annonces. Vous devez donc vous assurer de n'informer le SDK que lorsque votre contenu est terminé, et non lorsque l'annonce est terminée. Pour ce faire, utilisez le code suivant:

var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}

Les événements CONTENT_PAUSE_REQUESTED et CONTENT_RESUME_REQUESTED permettent de suspendre et de reprendre le contenu lorsque des coupures publicitaires sont diffusées.
Si votre lecteur vidéo est compatible avec le glisser-déposer pour le saut, et que la propriété d'heure actuelle du lecteur vidéo est mise à jour pendant que l'utilisateur fait glisser l'élément, le SDK ne peut pas faire la différence entre le contenu qui progresse normalement et un utilisateur qui le parcourt. Vous devez utiliser un objet contentPlayback personnalisé comme paramètre pour getAdsManager. Pour obtenir un exemple de ce cas d'utilisation, consultez The Trouble with Seeking (Les problèmes liés à la recherche).

Remarque:Lorsque la lecture du contenu est terminée ou que l'utilisateur a arrêté la lecture, veillez à appeler AdsLoader.contentComplete pour signaler au SDK que le contenu est terminé. Le SDK diffuse ensuite la coupure publicitaire post-roll, si une telle coupure a été planifiée. L'événement ALL_ADS_COMPLETED est déclenché lorsque TOUTES les coupures publicitaires ont été diffusées. En outre, notez que le suivi du contenu commence lorsque init() est appelé et que vous devez toujours appeler init() avant de lire du contenu.

Désactiver la lecture automatique des coupures publicitaires

Dans certains cas, vous pouvez empêcher le SDK de diffuser des coupures publicitaires tant que vous n'êtes pas prêt. Dans ce scénario, vous pouvez désactiver la lecture automatique des coupures publicitaires et indiquer au SDK quand vous êtes prêt à diffuser une coupure publicitaire. Avec cette configuration, une fois que le SDK a chargé une coupure publicitaire, il déclenche un événement AD_BREAK_READY. Lorsque votre lecteur est prêt à commencer la coupure publicitaire, vous pouvez appeler adsManager.start():

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

Essayer

Consultez le code suivant pour obtenir une implémentation fonctionnelle.

Les difficultés liées à la recherche

Si vous utilisez des règles d'annonces, vous pouvez rencontrer un problème avec la recherche par clic et glisser. Plus précisément, lorsqu'un utilisateur clique et fait glisser la vidéo pour passer plusieurs séries de midrolls, il peut voir deux ou plusieurs de ces séries s'afficher l'une après l'autre avant que le contenu ne soit repris. Cela est dû à la mise à jour de l'heure de la tête de lecture vidéo pendant la recherche de l'utilisateur. Si le SDK interroge l'heure actuelle pendant que l'utilisateur passe une annonce, il peut penser que l'annonce doit être lue. Lorsque le contenu reprend, cette annonce est diffusée, puis l'annonce la plus récente depuis la recherche. Pour une représentation visuelle de ce problème, consultez le schéma suivant:

Enregistrez l'heure actuelle lorsque l'utilisateur commence à rechercher, puis signalez cette heure lorsque le SDK le demande jusqu'à ce que l'utilisateur reprenne la lecture normale. Pour une représentation visuelle de cette solution, consultez le schéma suivant:

Avec cette solution, vous sautez correctement l'annonce mid-roll de 0:10 et ne diffusez que l'annonce mid-roll de 0:20. Pour ce faire, utilisez un traceur de point de lecture personnalisé dans l'extrait de code suivant. Ce code contient des modifications (en gras) de ads.js dans l'exemple HTML5 avancé disponible sur notre page de téléchargement.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Problèmes connus avec Safari mobile

Cette méthode devrait fonctionner sur toutes les plates-formes, sauf Safari mobile. Sur Safari mobile, la propriété de recherche de la balise vidéo n'est pas correctement implémentée (elle renvoie toujours la valeur "false"). Pour contourner ce problème, vous devez effectuer votre propre vérification pour voir si l'utilisateur recherche dans la vidéo. Vous trouverez ci-dessous l'exemple de code de cette méthode. Encore une fois, les lignes en gras correspondent à des modifications apportées au code existant.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Avec ces modifications, le SDK utilise désormais la propriété currentTime de votre objet Ads pour déterminer quand diffuser les coupures publicitaires, et non la propriété currentTime du lecteur vidéo du contenu.