IMA HTML5 SDK 支持完全自动化的广告播放列表。此功能 按照 Google Ad Manager 。它还大大简化了视频播放器代码 (包括前贴片广告、中贴片广告和后贴片广告)。
- 创建
AdsManager
时,一个contentPlayback
对象通过 getAdsManager 传入的 调用。此对象必须 具有可返回当前进度条指针的currentTime
属性 视频的具体位置。如果您使用 HTML5video
元素 展示您的内容,只需将该元素传递给 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 会使用您的视频
因此您需要确保仅在
而不是在广告播完之后才展示为此,您可以使用
代码如下:
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(); }
试试看
您可在下方看到有效的实现代码。
<ph type="x-smartling-placeholder">跳转时遇到的问题
如果您使用广告规则,则可能会遇到点击并拖动跳转方面的问题。 具体而言,在用户点击并拖动以浏览多个视频之后 中贴片广告连播,他们可能也会看到 2 个或多个连播广告 继续播放内容。这是由于在 用户正在寻找视频如果 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
内容视频播放器。