Membuat penghitung mundur iklan

Panduan ini menuntun Anda dalam menambahkan penghitung mundur ke penerapan IMA SDK HTML5.

Prasyarat

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

Membuat timer

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