L'SDK IMA per HTML5 supporta le playlist di annunci completamente automatizzate. Questa funzionalità inserisce interruzioni pubblicitarie nei contenuti come specificato Google Ad Manager quando gestisci il traffico degli annunci. Inoltre, semplifica notevolmente il codice del video player necessarie per supportare le interruzioni pubblicitarie, tra cui pre-roll, mid-roll e post-roll.
- Durante la creazione di
AdsManager
, uncontentPlayback
viene passato tramite il comando getAdsManager chiamata. Questo oggetto deve avere una proprietàcurrentTime
che restituisce la testina di riproduzione corrente posizione del video. Se utilizzi un elementovideo
HTML5 per visualizzare i tuoi contenuti, puoi passare quell'elemento all'SDK. Questo oggetto viene utilizzato per monitorare l'avanzamento della riproduzione dei contenuti in modo che le interruzioni pubblicitarie inserite automaticamente nei momenti specificati in Ad Manager. Devi inoltre consentire alla L'SDK sappia che vuoi che gestisca lo stato dei contenuti per tuo conto.var adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; adsManager = adsManagerLoadedEvent.getAdsManager( videoContent, adsRenderingSettings); // See API reference for contentPlayback.
- Per assicurarti che vengano riprodotti i post-roll, devi comunicare all'SDK quando i tuoi contenuti
l'operazione. Questo è un po' complicato perché in alcuni casi l'SDK utilizza il tuo video
di riprodurre gli annunci, quindi devi assicurarti di comunicare all'SDK solo
alla fine dei contenuti e non alla fine di un annuncio. Puoi farlo utilizzando
seguente:
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
eCONTENT_RESUME_REQUESTED
vengono utilizzati per mettere in pausa e riprendere la riproduzione dei contenuti durante la riproduzione delle interruzioni pubblicitarie.- Se il video player supporta la funzionalità di trascinamento e la proprietà temporale corrente di
il video player si aggiorna mentre l'utente sta trascinando, l'SDK non riesce
tra i contenuti che procedono normalmente e un utente che li cerca.
Devi utilizzare un oggetto contentPlayback personalizzato come parametro per
getAdsManager
. Per un esempio di questo caso d'uso, consulta The Problemi con la ricerca.
Nota:al termine della riproduzione dei contenuti o
Se l'utente ha interrotto la riproduzione, assicurati di chiamare AdsLoader.contentComplete
per segnalare all'SDK che i contenuti sono stati completati. L'SDK riproduce quindi
l'interruzione pubblicitaria post-roll, se ne è stata pianificata una. ALL_ADS_COMPLETED
viene generato quando sono state riprodotte TUTTE le interruzioni pubblicitarie. Inoltre, tieni presente
il monitoraggio dei contenuti inizia quando viene chiamato init()
e dovresti
chiama sempre init()
prima di riprodurre i contenuti.
Disattivazione della riproduzione automatica delle interruzioni pubblicitarie
In alcuni casi potresti voler impedire all'SDK di riprodurre le interruzioni pubblicitarie fino a quando
sei pronto. In questo caso, puoi disattivare la riproduzione automatica delle interruzioni pubblicitarie.
in favore di far sapere all'SDK quando è tutto pronto per un'interruzione pubblicitaria da riprodurre. Con questo
configurazione, dopo che l'SDK ha caricato un'interruzione pubblicitaria, attiva un
AD_BREAK_READY
evento. Quando il player è pronto
per l'inizio dell'interruzione pubblicitaria,
puoi chiamare 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(); }
Prova
Di seguito puoi vedere un'implementazione funzionante.
Il problema della ricerca
Se utilizzi le regole per gli annunci, potresti incorrere in un problema di ricerca tramite clic e trascinamento. In particolare, dopo che un utente fa clic e trascina per scorrere il video per i pod mid-roll, possono vedere che 2 o più pod vengono riprodotti in sequenza prima i contenuti riprendono. Ciò è causato dall'aggiornamento del tempo della testina di riproduzione del video mentre che l'utente sta cercando; se l'SDK esegue il polling per il momento corrente mentre l'utente cerca oltre un annuncio, potrebbe pensare che l'annuncio debba essere riprodotto. Quando i contenuti riprende, l'annuncio viene riprodotto e poi l'annuncio più recente dalla ricerca. Per un rappresentazione visiva di questo problema, vedi il diagramma seguente:
Il modo semplice per risolvere questo problema è salvare l'ora attuale quando l'utente inizia ricerca e segnala il momento in cui l'SDK richiede la richiesta consente di riprendere la riproduzione normale. Per una rappresentazione visiva di questa soluzione, consulta diagramma seguente:
Con questa soluzione, salti correttamente il mid-roll 0:10 e riproduci solo il mid-roll 0:20.
Per eseguire questa operazione, usa un tracker delle testine di riproduzione personalizzato, come mostrato di seguito. Il codice riportato di seguito
contiene modifiche (mostrate in grassetto) di ads.js
nell'HTML5 avanzato
campione disponibile nel nostro
pagina di download.
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_); };
Problemi noti relativi a Safari per dispositivi mobili
Questo metodo dovrebbe funzionare su tutte le plaform, ad eccezione di Safari sui dispositivi mobili. Su dispositivo mobile Safari, la proprietà di ricerca del tag video non è implementata correttamente (il tag restituisce sempre false). Per aggirare questa limitazione, devi effettuare un tuo controllo per vedere se l'utente sta cercando attraverso il video. Il codice campione per questo metodo . Anche in questo caso, le righe in grassetto sottostanti sono modifiche al codice esistente.
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_); };
Con queste modifiche, l'SDK utilizza la proprietà currentTime di Ads
per determinare quando riprodurre le interruzioni pubblicitarie, non la proprietà currentTime
video player di contenuti.