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/interface/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 函数会根据广告是否可跳过、广告当前是否可跳过以及广告变为可跳过所剩余的时间来更新跳过按钮。它使用 IMA 未提供的 '.hidden' 类。.hidden 类会向 <button> 添加 display: none;。
/**
* 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 技术论坛。