Hướng dẫn này sẽ chỉ cho bạn cách thêm đồng hồ đếm ngược vào quá trình triển khai SDK IMA HTML5.
Điều kiện tiên quyết
Hướng dẫn này giả định rằng bạn đã triển khai SDK IMA HTML5 đang hoạt động. Nếu chưa, hãy tham khảo Hướng dẫn bắt đầu sử dụng.
Tạo bộ tính giờ
Để thêm đồng hồ đếm ngược vào trình phát video có bật IMA, bạn chỉ cần thêm vài dòng JavaScript để thăm dò thuộc tính remainingTime
của thực thể AdsManager
. Chúng tôi sử dụng phương thức setInterval()
để gọi một hàm mỗi giây nhằm kiểm tra 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); } }
Dùng thử
Bạn có thể xem cách triển khai đang hoạt động ở bên dưới.