이 가이드에서는 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); } }
사용해 보기
아래에서 실제로 작동하는 구현을 확인할 수 있습니다.