显示音频广告的海报图片

本指南将演示如何使用 IMA HTML5 SDK 叠加显示您的视频 带有海报图片的播放器。此方法应在 在您的 VAST 网址请求中设置了 ad_type=audio_video。这样，您就可以 由于音频广告和视频广告都符合条件且完整播放，因此广告创收能力得到了提升 进行投放。请参阅 ad_type 文档 和视频中的音频 内容 了解详情。

您可以按照本指南中的说明，对基本的 IMA 集成，或参阅 视频示例应用中的音频 ，以便与此功能全面集成。

前提条件

  • 实施 IMA HTML5 SDK 视频广告的应用。请参阅 IMA HTML5 入门指南 。
  • 音频广告播放时，默认海报图片会叠加在视频播放器上 不包含相关的重叠式广告图片。为了让图片符合 视频播放器，其宽度必须小于或等于视频的尺寸 播放器，并且其高度必须比视频高度至少低 75 像素 。

启用海报图片功能

在发出音频和视频广告请求之前，请将 audioPosterImageEnabled 将功能标志设置为 true，将 audioPosterImageDefaultUrl 功能标志设置为 默认的海报图片网址。为此，请使用 ImaSdkSettings.setFeatureFlags() 然后再创建 AdDisplayContainer。如果已设置该属性，且音频广告 IMA 会自动将与广告相关的图片叠加到 视频播放器。IMA 会选择适合的最大随播广告图片 且比视频播放器短至少 75 像素。 如果广告的 VAST 中未包含可用作重叠式广告的图片，则 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);
}