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

HTML5 IMA SDK에서 UIElements를 사용하여 제공하는 내장 카운트다운 타이머를 사용하는 것이 좋습니다. 자체 구현을 원하는 경우 다음 단계를 따르세요.

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

기본 요건

이 가이드에서는 작동하는 HTML5 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);
  }
}
  

사용해 보기

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