建立廣告倒數計時器

建議使用 HTML5 IMA SDK 提供的內建倒數計時器，並使用UIElements。如果您仍想自行實作，請按照下列步驟操作。

本指南會逐步說明如何在 HTML5 IMA SDK 實作中加入倒數計時器。

必要條件

本指南假設您已實作可正常運作的 HTML5 IMA SDK。如果沒有，請參閱「設定 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);
  }
}
  

立即試用

請參閱這個功能的實作方式。