IMA HTML5 SDK 支持音频广告，其设置与视频广告类似，但有一些关键区别。对于本指南中未涉及的 IMA 设置的任何部分，请参阅 HTML5 入门指南。
使用 <audio> 标记进行内容播放
AdDisplayContainer 的构造函数会接受名为 videoElement 的第二个参数，IMA 会将该参数作为内容播放器进行跟踪。此参数接受 <video> 或 <audio> 标记。对于音频内容和广告，本指南建议使用 <audio> 标记构建 AdDisplayContainer。如果您有视频内容，可以使用 <video> 标记混合展示音频和视频广告：
index.html
<audio id="audio-player"></audio>
<div class="ad-container"></div>
ads.js
audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);
隐藏 AdDisplayContainer
即使广告或内容没有展示部分，IMA HTML5 SDK 仍然需要 AdDisplayContainer。因此，我们建议您隐藏 AdDisplayContainer。以下示例展示了如何隐藏元素：
style.css
.ad-container {
display: none;
}
自定义控件
由于 AdDisplayContainer 处于隐藏状态，因此需要使用自定义控件来处理广告插播期间的播放。AdsManager 具有可用于实现这些自定义控件的方法：
处理可跳过式广告
由于没有可见的 AdDisplayContainer，因此 IMA SDK 无法显示跳过广告按钮。如需处理可跳过式广告，请实现以下 IMA 方法：
以下示例代码展示了如何执行此操作。
ads.js
您可以设置一个 updateSkippable 函数来确定是否可以跳过广告以及何时跳过。此函数应针对每个 AD_PROGRESS IMA 事件调用。
如需了解如何为 IMA 事件设置监听器，请参阅入门指南。
function onAdsManagerLoaded(adsManagerLoadedEvent) {
adsManager = adsManagerLoadedEvent.getAdsManager(
audioPlayer);
...
adsManager.addEventListener(
google.ima.AdEvent.Type.AD_PROGRESS,
onAdEvent);
...
}
function onAdEvent(adEvent) {
const ad = adEvent.getAd();
if (ad) {
currentAd = ad; // currentAd is defined outside of this functions scope.
}
switch (adEvent.type) {
...
case google.ima.AdEvent.Type.AD_PROGRESS:
// See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdProgressData
const adProgressData = adEvent.getAdData();
updateSkippable(
adProgressData.currentTime,
currentAd.getSkipTimeOffset()
);
break;
...
}
}
/**
* Called when there may be a change in the skippable state.
* @param {number} currentTime The current time of the
* currently playing ad.
* @param {number} skipTimeOffset The number of seconds of playback
* before the ad becomes skippable. -1 is returned for non skippable
* ads or if this is unavailable.
*/
updateSkippable(currentTime, skipTimeOffset) {
const isAdSkippable = skipTimeOffset !== -1;
const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
updateSkipUI(
isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
}
与视频广告不同，IMA 无法为音频广告提供“跳过”按钮。
开发者必须为可跳过式广告添加自定义界面，只需使用简单的 <button> 标记即可。此 updateSkipUI 函数会根据广告是否可跳过、广告目前是否可跳过以及广告可跳过前的剩余时间来更新跳过按钮。它会使用 '.hidden' 类，但该类并非由 IMA 提供。.hidden 类会将 display: none; 添加到 <button>。
/**
* Updates the skip button UI.
* @param {boolean} isAdSkippable if the current ad is a skippable ad.
* @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
* @param {number} timeTillSkipInSeconds time until the ad can be skipped in
* seconds.
*/
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
if (isAdSkippable) {
skipButton.classList.remove('hidden');
if (isSkipCurrentlyAllowed) {
skipButton.textContent = 'Skip ad';
skipButton.disabled = false;
} else {
skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
skipButton.disabled = true;
}
} else {
skipButton.classList.add('hidden');
}
}
最后，设置一个监听器，监听用户点击您的自定义跳过按钮。如需跳过广告，请调用 adsManager.skip() 函数。
skipButton.addEventListener('click', () => {
adsManager.skip();
});
以下是设置包含音频广告的 IMA SDK 所需的主要更改。有关实现问题的解答，请访问 IMA SDK 技术论坛。