Imagem do pôster de anúncios em áudio

Este guia demonstra como usar o SDK HTML5 do IMA para sobrepor um player de vídeo com uma imagem de pôster quando os anúncios em áudio forem reproduzidos. Use quando ad_type=audio_video estiver definido na sua solicitação de URL VAST. Isso permite uma melhor monetização de anúncios, já que os anúncios em áudio e em vídeo estão qualificados e completos para serem veiculados. Consulte a documentação do ad_type e a seção de Áudio em conteúdo de vídeo para mais detalhes.

Siga este guia fazendo as alterações em integrações básicas do IMA ou consulte o áudio em apps de amostra de vídeo para ter uma integração completa com esse recurso.

Pré-requisitos

• Um aplicativo que implementa o SDK HTML5 do IMA para anúncios em vídeo. Consulte o Guia de primeiros passos sobre HTML5 do IMA para mais informações.
• Uma imagem de pôster padrão que se sobrepõe ao player de vídeo quando um anúncio em áudio é veiculado sem uma imagem de sobreposição relevante. Para que a imagem se encaixe no player de vídeo, a largura precisa ser menor ou igual à do player e a altura precisa ser pelo menos 75 px menor que a do player de vídeo.

Ativar o recurso de imagem do pôster

Antes de fazer a solicitação de anúncio em áudio e vídeo, defina a flag de recurso audioPosterImageEnabled como true e a flag de recurso audioPosterImageDefaultUrl como o URL padrão da imagem do pôster. Faça isso com a API ImaSdkSettings.setFeatureFlags() antes de criar o AdDisplayContainer. Quando isso estiver definido e um anúncio em áudio estiver sendo reproduzido, o IMA sobrepõe automaticamente uma imagem relacionada ao anúncio na parte superior do player de vídeo. O IMA escolhe a maior imagem de anúncio complementar disponível no player de vídeo e tem pelo menos 75 px mais menor que esse player. Se o VAST do anúncio não incluir uma imagem que possa ser usada pelo IMA como sobreposição, a imagem padrão especificada será usada nesse processo.

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