Tạo đồng hồ đếm ngược quảng cáo

Hướng dẫn này sẽ hướng dẫn bạn cách thêm đồng hồ đếm ngược vào quá trình triển khai SDK IMA HTML5.

Điều kiện tiên quyết

Hướng dẫn này giả định rằng bạn đã triển khai SDK IMA HTML5 đang hoạt động. Nếu không, hãy tham khảo phần Thiết lập IMA SDK.

Tạo bộ hẹn giờ

Để thêm đồng hồ đếm ngược vào trình phát video hỗ trợ IMA, bạn chỉ cần thêm một vài dòng JavaScript để thăm dò thuộc tính remainingTime của thực thể AdsManager. Chúng ta sử dụng phương thức setInterval() để gọi một hàm mỗi giây nhằm kiểm tra 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);
  }
}

Dùng thử

Xem cách triển khai đang hoạt động này.