创建广告倒计时器

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

前提条件

本指南假定您具备有效的 HTML5 IMA SDK 实现。否则 请参阅入门指南。

创建计时器

您只需在启用 IMA 的视频播放器中添加倒计时器即可 添加几行 JavaScript 来轮询 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);
  }
}

试试看

您可在下方看到有效的实现代码。