Pakiet IMA HTML5 SDK obsługuje w pełni automatyczne playlisty reklam. Ta funkcja wstawia przerwy na reklamy w treści zgodnie z Google Ad Manager podczas trafikowania reklam. Znacznie upraszcza też kod odtwarzacza. konieczne do obsługi przerw na reklamy, w tym reklam przed filmem, w jego trakcie i po nim.
- Podczas tworzenia elementu
AdsManager
contentPlayback
obiekt jest przekazywany za pomocą funkcji getAdsManager . Ten obiekt musi mają właściwośćcurrentTime
, która zwraca bieżący suwak odtwarzania; pozycji filmu. Jeśli używasz elementuvideo
HTML5 do wyświetlanie Twoich treści, wystarczy przekazać ten element do SDK. Ten obiekt jest wykorzystywana do śledzenia postępów odtwarzania treści, dzięki czemu przerwy na reklamę automatycznie wstawiane w godzinach określonych w usłudze Ad Manager. Musisz też zezwolić Pakiet SDK wie, że chcesz, aby sam przetwarzał stan treści w Twoim imieniu.var adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; adsManager = adsManagerLoadedEvent.getAdsManager( videoContent, adsRenderingSettings); // See API reference for contentPlayback.
- Aby mieć pewność, że reklamy po filmie będą odtwarzane, musisz powiadomić pakiet SDK, gdy Twoje treści
na koniec. To trochę podchwytliwe, bo czasami pakiet SDK wykorzystuje Twój film
do wyświetlania reklam, więc musisz upewnić się, że pakiet SDK jest informowany tylko wtedy,
gdy reklama skończy się oglądać, a nie reklama. Aby to zrobić, użyj
poniżej:
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
iCONTENT_RESUME_REQUESTED
służą do wstrzymywania i wznawiania odtwarzania treści podczas odtwarzania przerw na reklamę.- Jeśli Twój odtwarzacz obsługuje funkcję „przeciągnij, by przewinąć”, a bieżąca właściwość czasu to
Odtwarzacz aktualizuje się podczas przeciągania przez użytkownika, pakiet SDK nie rozróżnia
między normalnym postępem a użytkownikiem przeglądającym je.
Musisz użyć niestandardowego obiektu contentOdtwarzanie jako parametru w:
getAdsManager
. Przykład tego zastosowania znajdziesz w artykule The issues with Seeking (Problem z wyszukiwaniem).
Uwaga: po zakończeniu odtwarzania treści lub
użytkownik zatrzymał odtwarzanie, wywołaj AdsLoader.contentComplete
, aby zasygnalizować pakiet SDK, że treści są gotowe. Następnie pakiet SDK odtwarza
przerwę na reklamę po filmie, jeśli została zaplanowana. ALL_ADS_COMPLETED
zdarzenie jest wywoływane po odtworzeniu WSZYSTKICH przerw na reklamę. Ponadto pamiętaj,
śledzenie treści rozpoczyna się po wywołaniu usługi init()
.
zawsze wywołaj init()
przed odtworzeniem treści.
Wyłączanie automatycznego odtwarzania przerw na reklamę
W pewnych okolicznościach możesz zdecydować, aby pakiet SDK nie odtwarzał przerw na reklamy do czasu
na pewno Ci się uda. W takiej sytuacji możesz wyłączyć automatyczne odtwarzanie przerw na reklamę.
zamiast informować pakiet SDK o gotowości do rozpoczęcia przerwy na reklamę. W związku z tym
Gdy pakiet SDK załaduje przerwę na reklamę, uruchomi tag
AD_BREAK_READY
zdarzenie. Gdy odtwarzacz będzie gotowy do rozpoczęcia przerwy na reklamę,
można wywołać metodę 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(); }
Wypróbuj
Poniżej możesz zobaczyć działającą implementację.
Problem z przewijaniem
Jeśli korzystasz z reguł reklamowych, możesz napotkać problem z przewijaniem przez kliknięcie i przeciągnięcie. Konkretnie: gdy użytkownik kliknie i przeciągnie, by przewinąć film, bloków reklamowych w trakcie filmu, mogą zauważyć, że co najmniej 2 takie bloki odtwarzają się jedna po drugiej, wznowienie treści. Przyczyną jest to, że czas odtwarzania suwaka jest aktualizowany, gdy użytkownik wyszukuje; jeśli pakiet SDK przeprowadza ankietę w bieżącym momencie, przeszukuje reklamę, może uznać, że powinna zostać odtworzona. Gdy treść wznowiona, reklama zostanie odtworzona, a potem ostatnia od wyszukiwania. Dla wizualne przedstawienie tego problemu, patrz poniższy schemat:
![](https://developers.google.cn/static/interactive-media-ads/images/seeking_issue.jpg?authuser=8&hl=pl)
Prostym sposobem rozwiązania tego problemu jest zapisanie aktualnej godziny, w której użytkownik zaczyna i zgłaszać, gdy pakiet SDK o nie poprosi, dopóki użytkownik wznowi normalne odtwarzanie. Wizualną prezentację tego rozwiązania znajdziesz w ten schemat:
![](https://developers.google.cn/static/interactive-media-ads/images/seeking_fix.jpg?authuser=8&hl=pl)
Dzięki temu rozwiązaniu właściwie pomijasz reklamę w trakcie filmu 0:10 i odtwarzasz tylko reklamę 0:20.
Robi się to za pomocą niestandardowego trackera odtwarzania, jak pokazano poniżej. Kod poniżej
zawiera modyfikacje (pogrubione) elementu ads.js
w zaawansowanym formacie HTML5
próbka jest dostępna na
stronę pobierania.
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_); };
Znane problemy z mobilną przeglądarką Safari
Ta metoda powinna działać na każdej platformie oprócz mobilnej Safari. Na telefonie w przeglądarce Safari, właściwość wyszukiwania w tagu wideo nie jest poprawnie zaimplementowana (np. zawsze zwraca wartość fałsz). Aby to obejść, musisz samodzielnie sprawdzić czy użytkownik przewija film. Przykładowy kod tej metody co dalej. Również poniższe pogrubione wiersze oznaczają modyfikacje istniejącego kodu.
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_); };
W związku z tymi zmianami pakiet SDK używa teraz właściwości currentTime obiektu Ads
obiektu, aby określić, kiedy mają być odtwarzane przerwy na reklamę, a nie właściwości currentTime
funkcji
w odtwarzaczu wideo.