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

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

기본 요건

이 가이드에서는 작동하는 HTML5 IMA SDK가 구현되어 있다고 가정합니다. 자세한 내용은 시작 가이드를 참고하세요.

타이머 만들기

IMA를 사용하는 동영상 플레이어에 카운트다운 타이머를 추가하려면 AdsManager 인스턴스의 remainingTime 속성을 폴링하는 자바스크립트 몇 줄만 추가하면 됩니다. 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);
  }
}

사용해 보기

아래에서 실제로 작동하는 구현을 확인할 수 있습니다.