本頁面由 Cloud Translation API 翻譯而成。

廣告規則

IMA HTML5 SDK 支援全自動廣告播放清單。這項功能可將廣告插播時間點插入內容 Google Ad Manager 所需的資訊這也大幅簡化了影片播放器程式碼包括片頭廣告、片中廣告和片尾廣告。

建立 AdsManager 時，contentPlayback 物件會透過 getAdsManager 傳入呼叫。這個物件必須具有會傳回目前播放頭的 currentTime 屬性影片的位置。如果您使用 HTML5 video 元素就可以將該元素傳遞至 SDK。這個物件可用來追蹤內容播放進度，在 Ad Manager 中指定的時間自動插入您也需要讓 SDK 知道您想要由 SDK 代為處理內容狀態。
```
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
```

為確保片尾廣告能順利播放，您需要讓 SDK 得知內容更新完畢。這有點棘手，因為 SDK 有時會使用您的影片播放器來播放廣告，因此您必須確定只在而非廣告結束播放。方法是使用程式碼如下：

var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}

CONTENT_PAUSE_REQUESTED 和CONTENT_RESUME_REQUESTED 事件，以便在廣告出現時暫停並繼續播放內容。
如果您的影片播放器支援拖曳功能，且目前時間屬性影片播放器會在使用者拖曳時更新，但 SDK 無法區分之間的空缺。您必須使用自訂 contentPlayback 物件做為 getAdsManager 的參數。如需這個用途的範例，請參閱「探索問題」。

注意：內容播放完畢或是使用者停止播放，請務必呼叫 AdsLoader.contentComplete 用來向 SDK 指出內容已完成。接著，SDK 會播放片尾廣告時段 (如果已排程的話)。ALL_ADS_COMPLETED 事件。另外，請注意而內容追蹤會在呼叫 init() 時開始，而在播放內容前一律呼叫 init()。

停用廣告插播自動播放功能

在某些情況下，您可能希望 SDK 不要在廣告出現前，才能一探究竟在這種情況下，你可以停用自動播放廣告插播功能，藉此通知 SDK 準備好要播放廣告插播時間點。使用這項 SDK 載入廣告時段後，就會觸發 AD_BREAK_READY事件。播放器準備好要開始廣告插播後可以呼叫 adsManager.start()

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

立即試用

您可以在下方查看運作中的實作方式。

跳轉時發生問題

如果您使用廣告規則，可能會遇到按住拖曳手勢的問題，具體來說，當使用者點擊並拖曳影片時，在多個影片中跳過多個片段後片中廣告的廣告連播數量中，可能會看到 2 個以上的 Pod 重複播放內容繼續播放。這是因為在使用者尋找的內容當使用者進行 SDK 輪詢時避開了廣告，系統可能會認為應播放廣告。當內容此時，系統會播放該廣告，然後播放上次跳轉後的最新廣告。換這個問題的示意圖，如下圖所示：

要解決這個問題，最簡單的方法就是在使用者開始玩遊戲時節省時間並回報 SDK 要求的時間就會恢復正常播放。如需此解決方案的示意圖，請參閱下圖：

只要使用這個解決方案，你就能適當略過 0:10 的片中廣告，只播放 0:20 的片中廣告。請使用自訂播放頭追蹤程式進行這項操作，如下所示。以下程式碼包含進階 HTML5 中的 ads.js 修改內容 (以粗體顯示) 您可以在下載網頁。

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Safari 行動版的已知問題

這個方法適用於行動版 Safari 以外的所有表單。使用行動裝置 Safari，因為影片廣告代碼的尋找屬性並未正確導入 ( 一律傳回 false)。因此你必須自行檢查看看使用者是否看完整部影片這個方法的程式碼範例後面。再次提醒您，下方以粗體顯示的程式碼是修改現有程式碼。

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

經過這些變更，SDK 現已使用 Ads 的 currentTime 屬性物件以決定何時播放廣告插播，而不是currentTime 內容影片播放器