Posterbild für Audioanzeigen

In diesem Leitfaden erfahren Sie, wie Sie mit dem IMA HTML5 SDK Video-Overlays einblenden können. Player mit einem Posterbild, wenn Audioanzeigen abgespielt werden. Diese Option sollte verwendet werden, wenn In Ihrer VAST-URL-Anfrage ist ad_type=audio_video festgelegt. Dadurch können Sie verbesserte Anzeigenmonetarisierung, da Audio- und Videoanzeigen aktiv und vollständig sind geschaltet werden soll. Weitere Informationen finden Sie in der ad_type Dokumentation und Audio in Video Inhalte .

In diesem Leitfaden erfahren Sie, wie Sie ein einfaches IMA oder die Audio in Video-Beispiel-App für eine vollständige Integration dieser Funktion.

Vorbereitung

• Eine App, in der das IMA HTML5 SDK für Videoanzeigen implementiert ist Weitere Informationen finden Sie auf der Seite IMA HTML5 Startleitfaden .
• Ein Standardposterbild, das den Videoplayer überlagert, wenn eine Audioanzeige ohne relevantes Overlay-Bild ausgeliefert werden. Damit das Bild in den des Videoplayers festgelegt ist, muss seine Breite kleiner oder gleich der Breite des Videos sein. Player und muss mindestens 75 Pixel höher als das Video sein Player.

Posterbildfunktion aktivieren

Bevor Sie eine Anfrage für Audio- und Videoanzeigen stellen, legen Sie den audioPosterImageEnabled fest Funktions-Flag auf true und audioPosterImageDefaultUrl auf Standard-Posterbild-URL. Verwenden Sie dazu das ImaSdkSettings.setFeatureFlags() API vor dem Erstellen der AdDisplayContainer. Wenn dieser festgelegt ist und eine Audioanzeige wiedergegeben wird, blendet IMA automatisch ein mit der Anzeige verknüpftes Bild über den Videoplayer. IMA wählt das größte verfügbare Bild für die Companion-Anzeige aus, das im Videoplayer angezeigt wird und mindestens 75 Pixel kürzer als der Videoplayer ist. Wenn der VAST-Code der Anzeige kein Bild enthält, das von IMA als Overlay verwendet werden kann, wird verwendet das angegebene Standardbild als Overlay.

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