Создание таймера обратного отсчета для рекламы

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

Предварительные условия

В этом руководстве предполагается, что у вас есть работающая реализация HTML5 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);
  }
}

Попробуйте это

Посмотрите эту функционирующую реализацию.