광고 카운트다운 타이머 만들기

이 가이드에서는 HTML5 IMA SDK 구현에 카운트다운 타이머를 추가하는 방법을 안내합니다.

기본 요건

이 가이드에서는 작동하는 HTML5 IMA SDK 구현이 있다고 가정합니다. IMA SDK가 설치되어 있지 않으면 IMA SDK 설정을 참고하세요.

타이머 만들기

IMA 지원 동영상 플레이어에 카운트다운 타이머를 추가하려면 AdsManager 인스턴스의 remainingTime 속성을 폴링하는 JavaScript 코드 몇 줄만 추가하면 됩니다. setInterval() 메서드를 사용하여 1초마다 함수를 호출하여 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);
  }
}

사용해 보기

작동하는 구현을 확인하세요.