Automatyczne playlisty reklamowe

Pakiet IMA HTML5 SDK obsługuje w pełni zautomatyzowane listy odtwarzania reklam. Ta funkcja wstawia przerwy na reklamy w treściach zgodnie z ustawieniami w Google Ad Managerze podczas przesyłania reklam. Znacznie upraszcza też kod odtwarzacza wideo, który jest potrzebny do obsługi przerw na reklamę, w tym reklam przed filmem, w jego trakcie i po nim.

  • Podczas tworzenia obiektu AdsManager za pomocą wywołania getAdsManager przekazywany jest obiekt contentPlayback. Ten obiekt musi mieć właściwość currentTime, która zwraca bieżącą pozycję odtwarzania filmu. Jeśli do wyświetlania treści używasz elementu HTML5 video, możesz go przekazać do pakietu SDK. Obiekt ten służy do śledzenia postępów odtwarzania treści, aby przerwy na reklamy były automatycznie wstawiane w momentach określonych w Ad Managerze. Musisz też poinformować pakiet SDK, że chcesz, aby zarządzał stanem 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 poinformować pakiet SDK, kiedy kończy się zawartość. Jest to nieco skomplikowane, ponieważ w niektórych przypadkach pakiet SDK używa Twojego odtwarzacza wideo do wyświetlania reklam. Musisz więc upewnić się, że pakiet SDK jest informowany tylko o tym, kiedy kończy się Twoja treść, a nie o tym, kiedy kończy się reklama. Możesz to zrobić za pomocą tego kodu: 
    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);
  ...
}
  • Zdarzenia CONTENT_PAUSE_REQUESTED i CONTENT_RESUME_REQUESTED służą do wstrzymywania i wznawiania odtwarzania treści podczas przerw na reklamę.
  • Jeśli odtwarzacz wideo obsługuje funkcję przeciągania, a właściwość bieżącego czasu odtwarzacza wideo jest aktualizowana, gdy użytkownik przeciąga, pakiet SDK nie może odróżnić normalnego odtwarzania treści od przewijania przez użytkownika. Jako parametr getAdsManager musisz użyć niestandardowego obiektu contentPlayback. Przykład takiego zastosowania znajdziesz w artykule Problemy z wyszukiwaniem.

Uwaga: gdy treści zostaną odtworzone lub użytkownik zatrzyma odtwarzanie, wywołaj metodę AdsLoader.contentComplete, aby zasygnalizować pakietowi SDK, że treści zostały wyświetlone. Następnie pakiet SDK odtwarza przerwę na reklamę po filmie, jeśli została zaplanowana. Zdarzenie ALL_ADS_COMPLETEDuruchamiane jest po odtworzeniu WSZYSTKICH przerw na reklamę. Pamiętaj też, że śledzenie treści rozpoczyna się po wywołaniu funkcji init(). Przed odtworzeniem treści zawsze wywołuj funkcję init().

Wyłączanie automatycznego odtwarzania przerw na reklamy

W niektórych okolicznościach możesz chcieć zablokować odtwarzanie przerw na reklamy w pakiecie SDK, dopóki nie będziesz gotowy na ich wyświetlanie. W tym scenariuszu możesz wyłączyć automatyczne odtwarzanie przerw na reklamy, aby powiadomić pakiet SDK, że chcesz wyświetlić przerwę na reklamę. W ramach tej konfiguracji, gdy pakiet SDK wczyta przerwę na reklamę, uruchamia zdarzenie AD_BREAK_READY. Gdy odtwarzacz jest gotowy do rozpoczęcia przerwy na reklamę, możesz wywołać 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 znajdziesz działający kod.

Problemy z wyszukiwaniem

Jeśli używasz reguł reklamowych, możesz napotkać problem z przeszukiwaniem przez klikanie i przeciąganie. Gdy użytkownik kliknie i przeciągnie, aby przewinąć film o kilka podsegmentów w trakcie filmu, może zobaczyć 2 lub więcej podsegmentów odtwarzanych jeden po drugim, zanim treści zostaną wznowione. Wynika to z aktualizowania czasu odtwarzania podczas przewijania przez użytkownika. Jeśli SDK sprawdza aktualny czas, gdy użytkownik przewija film po reklamie, może uznać, że należy ją odtworzyć. Gdy treści zostaną wznowione, wyświetli się ta reklama, a następnie najnowsza reklama od momentu przesunięcia. Wizualne przedstawienie tego problemu:

Zapisz bieżący czas, gdy użytkownik zacznie przewijać, i przekazuj go, gdy SDK poprosi o to, aż użytkownik wznowi normalne odtwarzanie. Przykładowa wizualizacja tej rozwiązania:

Dzięki temu rozwiązaniu możesz prawidłowo pominąć reklamę mid-roll o długości 0:10 i odtworzyć tylko reklamę mid-roll o długości 0:20. W tym celu użyjesz niestandardowego śledzenia wskaźnika odtwarzania w podanym niżej fragmencie kodu. Ten kod zawiera modyfikacje (wyróżnione pogrubioną czcionką) ads.js w zaawansowanym pliku HTML5, który jest dostępny na stronie z plikami do pobrania.

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 Safari na urządzeniach mobilnych

Ta metoda powinna działać na każdej platformie oprócz Safari na urządzeniach mobilnych. W wersji mobilnej przeglądarki Safari właściwość seeking tagu wideo nie jest prawidłowo zaimplementowana (zawsze zwraca wartość false). Aby tego uniknąć, musisz samodzielnie sprawdzić, czy użytkownik przewija film. Poniżej znajdziesz przykładowy kod tej metody. Pogrubione wiersze to zmiany w dotychczasowym kodzie.

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

Dzięki tym zmianom pakiet SDK używa teraz właściwości currentTime obiektu Ads do określania, kiedy odtwarzać przerwy na reklamę, a nie właściwości currentTime odtwarzacza treści wideo.