יצירת טיימר לספירה לאחור למודעה

מומלץ להשתמש בטיימר המובנה לספירה לאחור ב-HTML5 IMA SDK דרך UIElements. . אם בכל זאת רוצים להטמיע הטמעה משלכם, יש לפעול לפי ההוראות שבהמשך.

המדריך הזה מסביר איך להוסיף טיימר לספירה לאחור בהטמעה של 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);
  }
}
  

אני רוצה לנסות

בהמשך אפשר לראות הטמעה תקינה.