Imagen de póster de anuncios de audio

En esta guía, se muestra cómo usar el SDK de IMA HTML5 para superponer el reproductor de video con una imagen de póster cuando se reproducen anuncios de audio. Debe usarse cuando se configura ad_type=audio_video en la solicitud de URL de VAST. Esto permite mejorar la monetización de los anuncios, ya que los anuncios de audio y video son aptos y completos para publicarse. Consulta la documentación de ad_type y el audio en contenido de video para obtener más detalles.

Para seguir esta guía, puedes realizar los cambios en una integración básica de IMA o ver la app de ejemplo de audio en video para obtener una integración completa con esta función.

Requisitos previos

• Una aplicación que implementa el SDK de IMA HTML5 para los anuncios de video. Consulta la guía de introducción de IMA HTML5 para obtener más información.
• Es una imagen de póster predeterminada que se superpone al reproductor de video cuando se publica un anuncio de audio sin una imagen superpuesta relevante. Para que la imagen se ajuste al reproductor de video, su ancho debe ser menor o igual que el del reproductor de video y su altura debe ser al menos 75 px menor que la del reproductor de video.

Habilita la función de imagen de póster

Antes de realizar tu solicitud de anuncio de audio y video, establece la marca de función audioPosterImageEnabled en true y la marca de función audioPosterImageDefaultUrl en la URL predeterminada de la imagen de póster. Haz esto con la API de ImaSdkSettings.setFeatureFlags() antes de crear la AdDisplayContainer. Cuando se configura y se reproduce un anuncio de audio, el IMA superpone automáticamente una imagen relacionada con el anuncio sobre el reproductor de video. El IMA elige la imagen del anuncio complementario más grande disponible que se ajuste al reproductor de video y sea al menos 75 px más corta que el reproductor de video. Si el anuncio de VAST no incluye una imagen que IMA pueda usar como una superposición, IMA utilizará la imagen predeterminada que especificaste como superposición.

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