Membuat penghitung mundur iklan

Panduan ini memandu Anda menambahkan timer hitung mundur ke penerapan IMA SDK HTML5.

Prasyarat

Panduan ini mengasumsikan bahwa Anda memiliki implementasi HTML5 IMA SDK yang berfungsi. Jika belum, lihat Panduan memulai.

Membuat timer

Menambahkan timer hitung mundur ke pemutar video yang mengaktifkan IMA hanya memerlukan penambahan beberapa baris JavaScript untuk melakukan polling properti remainingTime dari instance AdsManager. Kita menggunakan metode setInterval() untuk memanggil fungsi setiap detik untuk memeriksa 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);
  }
}

Cobalah

Lihat penerapan yang berfungsi ini.