电台广告

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 技术论坛。