音訊廣告的海報圖片

本指南示範如何使用 IMA HTML5 SDK，在影片上重疊顯示 以及含有代表圖片的播放器。只有在下列情況中 ad_type=audio_video 已在 VAST 網址請求中設定。這樣一來 提高廣告營利成效，因為音訊和影片廣告皆符合資格且完整 放送。請參閱 ad_type 說明文件 影片中音訊 內容 ，掌握更多詳細資訊。

您可以跟著本指南的說明，對基本 IMA 進行變更 整合，或參閱 影片範例應用程式中的音訊 才能完整與這項功能整合

必要條件

• 導入影片廣告 IMA HTML5 SDK 的應用程式。詳情請參閱 IMA HTML5 入門指南 瞭解詳情
• 一張預設海報圖片，會在音訊廣告播放時重疊在影片播放器上 但會在沒有相關重疊圖片的情況下放送為了讓圖片符合 影片播放器的寬度必須小於或等於影片寬度 播放器和高度至少必須比影片的 75 像素低 75 像素 廣告。

啟用代表圖片功能

提出音訊和影片廣告請求前，請設定 audioPosterImageEnabled 將功能旗標設為 true，並將 audioPosterImageDefaultUrl 功能旗標設為 您的預設代表圖片網址。請使用 ImaSdkSettings.setFeatureFlags()敬上 再建立 AdDisplayContainer。完成這項設定後，系統會改為放送音訊廣告 播放時，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);
}