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

Este guia demonstra como usar o SDK HTML5 do IMA para sobrepor seu vídeo player de vídeo com uma imagem de pôster quando anúncios em áudio são reproduzidos. Isso deve ser usado quando ad_type=audio_video está definido na solicitação de URL VAST. Isso permite melhor monetização de anúncios, já que os anúncios em áudio e vídeo estão qualificados e completos para ser veiculado. Consulte a ad_type documentação e Áudio in-video conteúdo para mais detalhes.

Acompanhe o guia para fazer as alterações em uma configuração integrações ou consulte a app de exemplo de áudio em vídeo para uma integração total com esse recurso.

Pré-requisitos

• Um app que implementa o SDK HTML5 do IMA para anúncios em vídeo. Veja o HTML5 do IMA guia para iniciantes 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 é veiculados sem uma imagem de sobreposição relevante. Para que a imagem se encaixe do player de vídeo, a largura dele precisa ser menor ou igual à do player player de vídeo e a altura dele precisa ser pelo menos 75 px menor que a do vídeo de futebol.

Ativar o recurso de imagem do pôster

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

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