如何使用Google IMA HTML5 SDK播放纯音频广告并替换黑屏视频播放器

核心问题成因：默认视频广告配置逻辑下，SDK会默认初始化视频播放容器渲染画面，纯音频场景需要手动修改配置禁用视频渲染逻辑。

• 第一步：修改广告渲染配置，禁用视频输出
  初始化AdsRenderingSettings时开启disableVideoPlayout参数，同时清空SDK默认UI元素，避免生成视频控件：

  const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  // 禁用视频画面渲染
  adsRenderingSettings.disableVideoPlayout = true;
  // 清空SDK默认生成的UI元素，避免出现视频控制条
  adsRenderingSettings.uiElements = [];
  

• 第二步：调整广告请求配置，显式指定广告类型为音频
  构造AdsRequest时指定adType为音频类型，让SDK按纯音频广告逻辑处理资源：

  const adsRequest = new google.ima.AdsRequest();
  // 显式指定广告类型为纯音频
  adsRequest.adType = google.ima.AdsRequest.AdType.AUDIO;
  // 其余广告位、广告标签地址按你的业务需求正常配置即可
  

• 第三步：调整AdDisplayContainer初始化参数
  不需要传入视频元素作为初始化的第二个参数，直接传入你自定义音频播放器的父容器即可：

  // 第一个参数为页面上承载音频播放器的父DOM节点，第二个参数传null即可
  const adDisplayContainer = new google.ima.AdDisplayContainer(
    document.getElementById('your-audio-ad-container'),
    null
  );
  // 按原有逻辑正常完成后续SDK初始化、广告请求流程即可
  adDisplayContainer.initialize();
  

• 第四步：自定义音频播放器UI绑定事件
  你可以自行开发音频广告的播放控制UI，监听IMA SDK的广告事件（播放、暂停、进度更新、结束等）同步UI状态即可，即使SDK内部生成了隐藏的video元素也不会影响页面展示。如果页面上出现了多余的可视video元素，直接给该元素添加display: none样式隐藏即可，不会影响音频广告的正常播放。

内容的提问来源于stack exchange，提问作者MahmutTariq