การสร้างนาฬิกานับเวลาถอยหลังของโฆษณา

เราขอแนะนำให้ใช้นาฬิกานับเวลาถอยหลังในตัวที่ HTML5 IMA SDK มีให้โดยใช้ UIElements ที่ใช้เวลาเพียง 2 นาที หากยังต้องการติดตั้งใช้งานด้วยตนเอง ให้ทำตามขั้นตอนด้านล่าง

คู่มือนี้จะอธิบายการเพิ่มนาฬิกานับเวลาถอยหลังลงในการใช้งาน HTML5 IMA SDK

ข้อกำหนดเบื้องต้น

คู่มือนี้จะถือว่าคุณติดตั้ง HTML5 IMA SDK ที่ใช้งานได้ หากไม่ทำเช่นนั้น โปรดดูคู่มือเริ่มต้นใช้งาน

กำลังสร้างตัวจับเวลา

การเพิ่มนาฬิกานับเวลาถอยหลังลงในโปรแกรมเล่นวิดีโอที่เปิดใช้ 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);
  }
}
  

ลองเลย

ดูการใช้งานจริงได้ที่ด้านล่าง