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. Hesabınız yoksa Başlangıç kılavuzunu 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.