音訊廣告的海報圖片

本指南說明如何使用 IMA HTML5 SDK，在音訊廣告放送時，將影片播放器與海報圖片重疊。當 VAST 網址要求中設定了 ad_type=audio_video 時，則應使用這個參數。如此一來，音訊和影片廣告都符合放送資格且完整放送，廣告營利成效就能因此提升。詳情請參閱 ad_type 說明文件和影片內容中的音訊。

您可以按照本指南中的指示，對基本 IMA 整合進行變更，或查看影片範例應用程式中的音訊，瞭解這項功能的完整整合。

必備條件

• 導入 IMA HTML5 SDK 影片廣告的應用程式。詳情請參閱 IMA HTML5 入門指南。
• 在沒有相關重疊圖片的情況下放送音訊廣告時，此預設海報圖片會重疊在影片播放器上。圖片的寬度必須小於或等於影片播放器的寬度，且高度至少要小於影片播放器的 75 像素，圖片才能符合影片播放器的大小。

啟用代表圖片功能

在提出音訊和影片廣告請求之前，請將 audioPosterImageEnabled 功能旗標設為 true，並將 audioPosterImageDefaultUrl 功能旗標設為您的預設海報圖片網址。請在建立 AdDisplayContainer 前使用 ImaSdkSettings.setFeatureFlags() API 進行此操作。完成設定且播放音訊廣告後，IMA 會自動將與廣告相關的圖片重疊在影片播放器上方。IMA 會選擇能在影片播放器內顯示的最大隨播廣告圖片，且比影片播放器快至少 75 像素。如果廣告的 VAST 不包含 IMA 可當做重疊廣告使用的圖片，IMA 會使用您指定的預設圖片做為重疊廣告。

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