广告规则

IMA HTML5 SDK 支持完全自动化的广告播放列表。此功能可在您投放广告时,在 Google Ad Manager 中指定的内容中插入广告插播时间点。它还大大简化了支持广告插播时间点所需的视频播放器代码,包括前贴片广告、中贴片广告和后贴片广告。

  • 创建 AdsManager 时,系统会通过 getAdsManager 调用传入 contentPlayback 对象。此对象必须具有 currentTime 属性,用于返回视频的当前进度条指针位置。如果您使用 HTML5 video 元素来显示内容,则只需将该元素传递给 SDK 即可。此对象用于跟踪内容播放进度,以便在 Ad Manager 中指定的时间自动插入广告插播时间点。您还需要告知 SDK 您希望它代表您处理内容状态。
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
    adsManager = adsManagerLoadedEvent.getAdsManager(
        videoContent, adsRenderingSettings); // See API reference for
        
        contentPlayback.
    
  • 为了确保后贴片广告可以播放,您需要告知 SDK 内容何时播放。这有点棘手,因为在某些情况下,SDK 会使用您的视频播放器播放广告,因此您需要确保只在内容播放完毕时告知 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_REQUESTEDCONTENT_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();
}

试试看

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

跳转时遇到问题

如果使用广告规则,可能会遇到点击并拖动跳转方面的问题。 具体而言,在用户点击并拖动视频以跳转至多个中贴片广告 Pod 之后,他们可能会看到其中 2 个或多个 Pod 连续播放,然后内容继续播放。这是由于在用户搜寻广告时视频进度条指针时间会更新所导致的;如果 SDK 在用户搜寻广告时碰巧轮询当前时间,它可能会认为应该播放该广告。内容恢复后,系统会播放该广告,然后播放自跳转以来的最新广告。如需查看此问题的直观表示形式,请参阅下图:

解决此问题的简单方法是在用户开始跳转时保存当前时间,并在 SDK 请求播放时报告这个时间,直到用户恢复正常播放为止。如需此解决方案的直观表示,请参阅下图:

采用此解决方案,您可以正确跳过 0:10 的中贴片广告,而仅播放 0:20 的中贴片广告。 这是使用自定义进度条指针跟踪器完成的,如下所示。以下代码包含对 ads.js 的修改(以粗体显示),具体请参阅下载页面上的高级 HTML5 示例。

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 属性)来确定何时播放广告插播时间点。