Tworzenie licznika czasu do zakończenia wyświetlania reklam

Z tego przewodnika dowiesz się, jak dodać licznik odliczający do implementacji pakietu IMA SDK HTML5.

Wymagania wstępne

W tym przewodniku zakładamy, że masz działającą implementację pakietu IMA HTML5 SDK. Jeśli nie, zapoznaj się z przewodnikiem dla początkujących.

Tworzenie minutnika

Dodanie do odtwarzacza wideo obsługującego IMA licznika odliczania wymaga dodania kilku linii kodu JavaScript, aby przeprowadzić ankietowanie właściwości remainingTime instancji AdsManager. Używamy metody setInterval(), aby co sekundę wywoływać funkcję sprawdzającą adsManager.remainingTime.

// Global countdown timer
var countdownTimer;
...
function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.STARTED,
      onAdsStarted);
}
...
function onAdsStarted(adEvent) {
  countdownTimer = setInterval(function() {
    var timeRemaining = adsManager.getRemainingTime();
    // Update UI with timeRemaining
  }, 1000);
}
...
function onContentResumeRequested(adEvent) {
  ...
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
}

Wypróbuj

Zobacz działającą implementację.