Image poster des annonces audio

Ce guide explique comment utiliser le SDK IMA HTML5 pour superposer une image poster à votre lecteur vidéo lors de la lecture d'annonces audio. Utilisez-la lorsque ad_type=audio_video est défini dans votre demande d'URL VAST. Cela permet d'améliorer la monétisation des annonces, car les annonces audio et vidéo sont éligibles et complètes pour être diffusées. Pour en savoir plus, consultez la documentation sur ad_type et la section Audio dans le contenu vidéo.

Vous pouvez suivre ce guide pour modifier une intégration IMA de base ou consulter l'application exemple audio dans la vidéo pour une intégration complète avec cette fonctionnalité.

Prérequis

• Application mettant en œuvre le SDK IMA pour HTML5 pour les annonces vidéo. Pour en savoir plus, consultez le guide de démarrage IMA pour HTML5.
• Il s'agit d'une image poster par défaut qui se superpose au lecteur vidéo lorsqu'une annonce audio est diffusée sans image de superposition pertinente. Pour que l'image s'adapte au lecteur vidéo, sa largeur doit être inférieure ou égale à celle du lecteur vidéo, et sa hauteur doit être inférieure d'au moins 75 pixels à celle du lecteur.

Activer la fonctionnalité d'image poster

Avant d'envoyer la demande d'annonce audio et vidéo, définissez le flag de fonctionnalité audioPosterImageEnabled sur true et le flag de fonctionnalité audioPosterImageDefaultUrl sur l'URL de votre image poster par défaut. Pour ce faire, utilisez l'API ImaSdkSettings.setFeatureFlags() avant de créer l'élément AdDisplayContainer. Lorsque cette option est définie et qu'une annonce audio est en cours de lecture, IMA superpose automatiquement une image liée à l'annonce par-dessus le lecteur vidéo. IMA choisit la plus grande image d'annonce associée disponible, qui s'adapte au lecteur vidéo et dont la longueur est d'au moins 75 pixels plus courte que celle du lecteur. Si le VAST de l'annonce n'inclut pas d'image pouvant être utilisée en superposition par le biais d'IMA, IMA utilise l'image par défaut que vous avez spécifiée en superposition.

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