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