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

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

במדריך הזה מוסבר איך מוסיפים טיימר לספירה לאחור להטמעה של IMA SDK ב-HTML5.

דרישות מוקדמות

במדריך הזה אנחנו יוצאים מנקודת הנחה שכבר הטמעתם 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);
  }
}
  

רוצה לנסות?

כאן אפשר לראות את ההטמעה הזו בפעולה.