Как создать таймер обратного отсчета в объявлении

В этом руководстве рассказывается, как добавить таймер обратного отсчета в реализацию IMA SDK для HTML5.

Требования

В этом руководстве предполагается, что у вас уже реализована рабочая версия IMA HTML5 SDK. Если нет, следуйте инструкциям в разделе Как настроить IMA SDK.

Как создать таймер

Чтобы добавить таймер обратного отсчета в видеопроигрыватель с поддержкой IMA, достаточно добавить несколько строк кода JavaScript, которые будут запрашивать свойство remainingTime экземпляра AdsManager. Мы используем метод setInterval(), чтобы вызывать функцию каждую секунду и проверять 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);
  }
}

Попробовать

Посмотрите пример правильной реализации.