音频广告海报图片

本指南介绍了如何在音频广告播放时使用 IMA HTML5 SDK 将视频播放器与海报图片叠加。如果您在 VAST 网址请求中设置了 ad_type=audio_video，则应使用此名称。这样做有助于提高广告创收能力，因为音频广告和视频广告都符合投放条件且可以完整投放。如需了解详情，请参阅 ad_type 文档和视频内容中的音频。

您可以按照本指南操作，对基本的 IMA 集成进行更改；也可以参阅视频中的音频示例应用，了解如何完全集成此功能。

前提条件

• 一款实现 IMA HTML5 SDK 视频广告的应用。有关详情，请参阅 IMA HTML5 入门指南。
• 在投放音频广告时，如果视频没有相关叠加层图片，则会在视频播放器上叠加显示默认海报图片。为了让图片适合视频播放器，其宽度必须小于或等于视频播放器的宽度，并且其高度必须至少比视频播放器高 75 像素。

启用海报图片功能

在发出音频和视频广告请求之前，请将 audioPosterImageEnabled 功能标志设置为 true，将 audioPosterImageDefaultUrl 功能标志设置为默认的海报图片网址。在创建 AdDisplayContainer 之前，请使用 ImaSdkSettings.setFeatureFlags() API 执行此操作。如果设置了此属性，并且正在播放音频广告，IMA 会自动将与广告相关的图片叠加到视频播放器之上。IMA 会选择可在视频播放器内显示的最大随播广告图片，且图片至少比视频播放器短 75 像素。 如果广告的 VAST 未包含可供 IMA 用作叠加层的图片，IMA 会将您指定的默认图片用作叠加层。

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}