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

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

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

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

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

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

การเพิ่มตัวจับเวลานับถอยหลังลงในวิดีโอเพลเยอร์ที่เปิดใช้ IMA นั้นเพียงแค่เพิ่ม JavaScript 2-3 บรรทัดเพื่อสำรวจพร็อพเพอร์ตี้ 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);
  }
}
  

ลองเลย

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