Imagen de póster de anuncios de audio

En esta guía, se muestra cómo usar el SDK de IMA HTML5 para superponer su video con una imagen de póster cuando se reproducen anuncios de audio. Se debe usar cuando ad_type=audio_video se configura en tu solicitud de URL de VAST. Esto permite Monetización mejorada de anuncios, ya que tanto los anuncios de audio como los de video son aptos y están completos que se entregarán. Consulta la ad_type documentación y audio en video contenido para obtener más información.

Puede continuar con esta guía, cómo hacer cambios en un IMA básico o bien consulta las 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. Consulte la documentación de IMA HTML5 guía de introducción para obtener más información.
• Una imagen de póster predeterminada que se superpone al reproductor de video cuando se publica se publica sin una imagen superpuesta relevante. Para que la imagen quepa en el reproductor de video, su ancho debe ser menor o igual que el del video y su altura debe ser de, al menos, 75 px menos que la del video de fútbol favorito.

Habilitar la función de imagen de póster

Antes de realizar tu solicitud de anuncio de audio y video, configura los audioPosterImageEnabled la marca de función en true y la marca de función audioPosterImageDefaultUrl en tu URL de imagen de póster predeterminada. Hazlo con el ImaSdkSettings.setFeatureFlags() API antes de crear el AdDisplayContainer. Cuando se establece esta opción y se crea un anuncio de audio se reproduce el anuncio, el IMA se superpone automáticamente con una imagen relacionada con el anuncio encima de la reproductor de video. La IMA elige la imagen del anuncio complementario más grande disponible que se ajuste a en el reproductor de video y es de, al menos, 75 px más corta que el reproductor de video. Si el anuncio VAST del anuncio no incluye una imagen que el IMA pueda usar como una superposición, utiliza la imagen predeterminada que especificaste como una 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);
}