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
, uncontentPlayback
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émentvideo
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
etCONTENT_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.
<ph type="x-smartling-placeholder">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:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_issue.jpg?authuser=0000&hl=fr)
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:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_fix.jpg?authuser=0000&hl=fr)
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.