Obraz plakatu reklam audio

Z tego przewodnika dowiesz się, jak używać pakietu IMA HTML5 SDK do nakładania reklam wideo odtwarzacz z obrazem plakatu podczas odtwarzania reklam audio. Należy go używać, gdy Żądanie adresu URL VAST zawiera parametr ad_type=audio_video. Umożliwi to lepsze przychody z reklam, ponieważ zarówno reklamy audio, jak i wideo są odpowiednie i pełne ma być wyświetlany. Zobacz ad_type dokumentacja oraz Dźwięk w filmie treści .

Postępuj zgodnie z instrukcjami z tego przewodnika, wprowadzając zmiany w podstawowej lub obejrzyj przykładowa aplikacja audio w wideo aby uzyskać pełną integrację z tą funkcją.

Wymagania wstępne

• Aplikacja implementująca pakiet IMA HTML5 SDK na potrzeby reklam wideo. Zobacz IMA HTML5 przewodnik dla początkujących .
• Domyślny obraz plakatu, który nakłada się na odtwarzacz, gdy reklama audio jest wyświetlane bez odpowiedniej nakładki. Aby obraz mieścił się w odtwarzacza, jego szerokość nie może być większa od szerokości filmu. , a jego wysokość musi być o co najmniej 75 pikseli mniejsza od wysokości filmu. .

Włącz funkcję obrazu plakatu

Przed wysłaniem żądania reklamy audio i wideo skonfiguruj audioPosterImageEnabled flagę funkcji na true oraz flagę funkcji audioPosterImageDefaultUrl do domyślny URL obrazu plakatu. Zrób to za pomocą ImaSdkSettings.setFeatureFlags() API przed utworzeniem AdDisplayContainer. Gdy zostanie ustawiony, a reklama audio w reklamie, IMA automatycznie nakłada na nią obraz powiązany z reklamą odtwarzacza wideo. IMA wybiera największy dostępny obraz reklamy towarzyszącej, który pasuje który jest wyświetlany w odtwarzaczu i jest o co najmniej 75 pikseli krótszy niż odtwarzacz. Jeśli VAST reklamy nie zawiera obrazu, którego IMA może użyć jako nakładki, IMA wybrany przez Ciebie domyślny obraz jest używany jako nakładka.

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