המדריך הזה מסביר איך להוסיף טיימר לספירה לאחור בהטמעה של HTML5 IMA SDK.
דרישות מוקדמות
המדריך הזה מניח שהטמעת את ה-IMA SDK של HTML5 באופן תקין. אם לא, עיינו במדריך לתחילת העבודה.
יצירת הטיימר מתבצעת
כדי להוסיף טיימר לספירה לאחור לנגן וידאו שתומך ב-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); } }
אני רוצה לנסות
בהמשך אפשר לראות הטמעה תקינה.