Membuat penghitung mundur iklan

Panduan ini membahas cara menambahkan penghitung mundur ke penerapan IMA SDK HTML5.

Prasyarat

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

Membuat timer

Menambahkan penghitung mundur ke pemutar video yang mendukung IMA hanya memerlukan menambahkan beberapa baris JavaScript untuk mengkueri 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

Anda dapat melihat implementasi yang berfungsi di bawah.