Image poster des annonces audio

Ce guide explique comment utiliser le SDK IMA pour HTML5 pour superposer votre vidéo. avec une image poster lors de la lecture des annonces audio. Utilisez cette option 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 à diffuser. Consultez le ad_type documentation et Audio dans les vidéos contenu pour en savoir plus.

Vous pouvez suivre ce guide pour apporter les modifications nécessaires ou consultez les application exemple audio in video pour une intégration complète de cette fonctionnalité.

Prérequis

• Une application mettant en œuvre le SDK IMA pour HTML5 pour les annonces vidéo. Découvrez la version HTML5 du SDK IMA guide de démarrage pour en savoir plus.
• Une image poster par défaut qui se superpose au lecteur vidéo lorsqu'une annonce audio est diffusées sans image de superposition pertinente. Pour que l'image tienne dans le lecteur vidéo, sa largeur doit être inférieure ou égale à celle de la vidéo. et sa hauteur doit être inférieure d'au moins 75 pixels à celle de la vidéo. joueur.

Activer la fonctionnalité d'image poster

Avant d'envoyer votre demande d'annonce audio et vidéo, définissez le audioPosterImageEnabled le flag de fonctionnalité sur true et le flag de fonctionnalité audioPosterImageDefaultUrl sur l'URL de votre image poster par défaut. Pour ce faire, utilisez ImaSdkSettings.setFeatureFlags() API avant de créer le AdDisplayContainer. Une fois défini, une annonce audio l'image est automatiquement superposée à l'image associée à l'annonce au-dessus de du lecteur vidéo. Le système IMA choisit l'image de l'annonce associée la plus grande disponible dans le lecteur vidéo et est inférieure d'au moins 75 pixels à celle du lecteur. Si le format VAST de l'annonce n'inclut pas d'image pouvant être utilisée en superposition par le SDK IMA, utilise l'image par défaut spécifiée comme 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);
}