Reklam geri sayım zamanlayıcı oluşturma

Bu kılavuzda, bir HTML5 IMA SDK uygulamasına geri sayım zamanlayıcı ekleme işlemi adım adım açıklanmaktadır.

Ön koşullar

Bu kılavuzda, çalışan bir HTML5 IMA SDK uygulamanız olduğu varsayılmaktadır. Aksi takdirde IMA SDK'yı ayarlama başlıklı makaleyi inceleyin.

Zamanlayıcıyı oluşturma

IMA özellikli video oynatıcınıza geri sayım zamanlayıcı eklemek için AdsManager örneğinin remainingTime mülkünü sorgulamak üzere yalnızca birkaç satır JavaScript eklemeniz gerekir. adsManager.remainingTime değerini kontrol etmek için her saniye bir işlev çağırmak üzere setInterval() yöntemini kullanırız.

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

Deneyin

Bu işlevsel uygulamayı inceleyin.