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

Règles relatives aux 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 du trafficking de vos annonces. De plus, il simplifie considérablement le code du lecteur vidéo nécessaires pour accepter les coupures publicitaires, y compris les annonces vidéo pré-roll, mid-roll et post-roll.

Lors de la création de AdsManager, un contentPlayback est transmis via getAdsManager . Cet objet doit disposer d'une propriété currentTime qui renvoie la tête de lecture actuelle ; de la vidéo. Si vous utilisez un élément video HTML5 pour afficher votre contenu, il vous suffit de 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 aux heures indiquées dans Ad Manager. Vous devez également autoriser le SDK sait que vous voulez 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 annonces vidéo post-roll sont bien lues, vous devez indiquer au SDK quand votre contenu est terminé. C'est un peu délicat, car dans certains cas, le SDK utilise pour diffuser des annonces. Vous devez donc vous assurer de n'indiquer au SDK votre contenu est terminé, et non lorsqu'une annonce est diffusée. Pour ce faire, vous pouvez utiliser code ci-dessous:

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);
  ...
}

CONTENT_PAUSE_REQUESTED et CONTENT_RESUME_REQUESTED sont utilisés pour mettre en pause et reprendre la lecture du contenu lors de la lecture des coupures publicitaires.
Si votre lecteur vidéo est compatible avec le glisser-déposer et que la propriété de l'heure actuelle de lorsque le lecteur vidéo est mis à jour pendant que l'utilisateur fait glisser, le SDK ne peut pas différencier entre le contenu qui progresse normalement et celui d'un utilisateur qui le recherche. Vous devez utiliser un objet contentPlayback personnalisé comme paramètre pour getAdsManager. Pour obtenir un exemple de ce cas d'utilisation, consultez Le problème de la recherche.

Remarque:Lorsque la lecture du contenu est terminée ou l'utilisateur a arrêté la lecture, veillez à appeler AdsLoader.contentComplete pour signaler au SDK que le contenu est terminé. Le SDK lit ensuite la coupure publicitaire post-roll, le cas échéant. ALL_ADS_COMPLETED est déclenché lorsque TOUTES les coupures publicitaires ont été lues. Notez en outre que le suivi du contenu commence lorsque init() est appelé. toujours appeler init() avant de lire le contenu.

Désactiver la lecture automatique des coupures publicitaires

Dans certains cas, vous pouvez empêcher le SDK de lire les coupures publicitaires jusqu'à ce que vous êtes prêt pour eux. Dans ce cas, vous pouvez désactiver la lecture automatique des coupures publicitaires. afin d'informer le SDK que vous êtes prêt pour une coupure publicitaire. Grâce à cette configuration, une fois que le SDK a chargé une coupure publicitaire, il déclenche Événement AD_BREAK_READY. Lorsque le lecteur est prêt pour le début de 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

Vous trouverez ci-dessous une implémentation fonctionnelle.

Le problème de la recherche

Si vous utilisez des règles relatives aux annonces, il est possible que vous rencontriez un problème avec la recherche par clic et déplacement. Plus précisément, lorsqu'un utilisateur clique et fait glisser la souris pour rechercher dans la vidéo après plusieurs les séries d'annonces mid-roll, il est possible qu'au moins deux de ces pods soient lus les unes après les autres le contenu reprend. Cela est dû à la mise à jour du temps de la tête de lecture vidéo recherche par l'utilisateur ; si le SDK interroge l'heure actuelle alors que l'utilisateur recherche au-delà d'une annonce, il peut considérer que l'annonce doit être lue. Lorsque le contenu reprend, l'annonce est lue, puis l'annonce la plus récente depuis la recherche. Pour une représentation visuelle de ce problème, voir le schéma ci-dessous:

Le moyen le plus simple de résoudre ce problème est de sauvegarder l'heure actuelle lorsque l'utilisateur commence et signaler ce moment où le SDK la demande jusqu'à ce que l'utilisateur reprend la lecture normale. Pour obtenir une représentation visuelle de cette solution, consultez la ci-dessous:

Cette solution vous permet d'ignorer l'annonce vidéo mid-roll 0:10 et de ne lire que l'annonce vidéo mid-roll 0:20. Pour ce faire, utilisez un outil de suivi de la tête de lecture personnalisé, comme illustré ci-dessous. Le code ci-dessous contient des modifications (affichées en gras) de ads.js dans l'interface HTML5 avancée extrait 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 pour mobile

Cette méthode devrait fonctionner sur toutes les plates-formes, à l'exception de Safari pour mobile. Sur mobile dans Safari, la propriété de recherche du tag vidéo n'est pas correctement implémentée (elle renvoie toujours la valeur "false"). Pour contourner cela, vous devez faire votre propre vérification pour pour voir si l'utilisateur parcourt la vidéo. L'exemple de code pour cette méthode suit. Là encore, les lignes en gras ci-dessous correspondent à des modifications du 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 Ads. pour déterminer quand lire les coupures publicitaires, et non la propriété currentTime de le lecteur vidéo de contenu.