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

HTML5 IMA SDK가 제공하는 내장 카운트다운 타이머를 UIElements 에서 자세한 내용을 확인하실 수 있습니다. 그래도 직접 구현하고 싶다면 아래 단계를 따르세요.

본 가이드는 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);
  }
}
  

사용해 보기

아래에서 실제 구현을 확인할 수 있습니다.