创建广告倒计时器

本指南逐步介绍了如何向 HTML5 IMA SDK 实现中添加倒计时器。

前提条件

本指南假定您拥有有效的 HTML5 IMA SDK 实施。如果您还不熟悉，请参阅入门指南。

创建计时器

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

试试看

您可以在下方查看有效的实现。