Đang tạo đồng hồ đếm ngược quảng cáo

Hướng dẫn này sẽ chỉ cho 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 chưa, hãy tham khảo Hướng dẫn bắt đầu sử dụng.

Tạo bộ tính giờ

Để thêm đồng hồ đếm ngược vào trình phát video có bật IMA, bạn chỉ cần thêm vài dòng JavaScript để thăm dò thuộc tính remainingTime của thực thể AdsManager. Chúng tôi 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ử

Bạn có thể xem cách triển khai đang hoạt động ở bên dưới.