创建广告倒计时器

本指南将引导您向 HTML5 IMA SDK 实现添加倒计时器。

前提条件

本指南假定您已成功实现 HTML5 IMA SDK。如果您还没有，请参阅入门指南。

创建计时器

只需添加几行 JavaScript 代码来轮询 AdsManager 实例的 remainingTime 属性，即可向启用了 IMA 的视频播放器添加倒计时器。我们使用 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);
  }
}

试试看

查看此正常运行的实现。