本指南逐步介绍了如何向 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); } }
试试看
您可以在下方查看有效的实现。