Display poster image for audio ads

This guide demonstrates how to use the IMA HTML5 SDK to overlay your video player with a poster image when audio ads are played. This should be used when ad_type=audio_video is set in your VAST URL request. Doing this allows for improved ad monetization as both audio and video ads are eligible and complete to be served. See the ad_type documentation and Audio in video content for more details.

You can follow along with this guide, making the changes to a basic IMA integrations, or see the audio in video sample app for a full integration with this feature.

Prerequisites

• An app implementing the IMA HTML5 SDK for video ads. See the IMA HTML5 getting started guide for more information.
• A default poster image which overlays the video player when an audio ad is served without a relevant overlay image. In order for the image to fit within the video player, its width must be less than or equal to that of the video player and its height must be at least 75 px less than that of the video player.

Enable the poster image feature

Before making your audio and video ad request, set the audioPosterImageEnabled feature flag to true and the audioPosterImageDefaultUrl feature flag to your default poster image URL. Do this with the ImaSdkSettings.setFeatureFlags() API before creating the AdDisplayContainer. When this is set and an audio ad is playing, IMA automatically overlays an image related to the ad on top of the video player. IMA chooses the largest companion ad image available that fits within the video player and is at least 75 px shorter than the video player. If the ad's VAST doesn't include an image that IMA can use as an overlay, IMA uses your specified default image as an overlay.

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);
}