本指南將逐步說明如何在 HTML5 IMA SDK 導入中加入倒數計時器。
必要條件
本指南假設您已導入 HTML5 IMA SDK。如果您尚未安裝,請參閱入門指南。
建立計時器
如要在已啟用 IMA 的影片播放器中加入倒數計時器,只需加入幾行 JavaScript,即可輪詢 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); } }
立即體驗
您可以在下方查看實際執行的方式。