오디오 광고 포스터 이미지

이 가이드에서는 IMA HTML5 SDK를 사용하여 동영상을 오버레이하는 방법을 보여줍니다. 포스터 이미지가 재생될 수 있습니다. 이것은 ad_type=audio_video가 VAST URL 요청에 설정되어 있습니다. 이렇게 하면 오디오 및 동영상 광고가 모두 적합하며 완전하므로 광고 수익 창출이 개선되었습니다. 지정할 수 있습니다. ad_type 문서오디오 인비디오 콘텐츠 를 참조하세요.

이 가이드에 따라 기본 IMA 통합하거나 동영상 샘플 앱의 오디오 를 참조하세요.

기본 요건

  • 동영상 광고용 IMA HTML5 SDK를 구현하는 앱 자세한 내용은 IMA HTML5 시작 가이드 를 참조하세요.
  • 오디오 광고가 재생될 때 동영상 플레이어 위에 오버레이되는 기본 포스터 이미지입니다. 게재되지 않도록 할 수 있습니다. 이미지가 다음 위치에 맞추려면 동영상 플레이어의 너비는 동영상의 너비보다 작거나 같아야 합니다. 동영상 플레이어의 높이가 동영상 크기의 최소 75픽셀보다 작아야 합니다. 있습니다.

포스터 이미지 기능 사용 설정

오디오 및 동영상 광고 요청을 하기 전에 audioPosterImageEnabled를 설정하세요. 기능 플래그를 true로, audioPosterImageDefaultUrl 기능 플래그를 기본 포스터 이미지 URL을 입력합니다. 이렇게 하려면 ImaSdkSettings.setFeatureFlags() 드림 API를 사용하여 AdDisplayContainer를 만듭니다. 이 값이 설정되고 오디오 광고가 광고가 재생되는 동안 IMA는 광고와 관련된 이미지를 동영상 플레이어의 있습니다. IMA는 화면에 맞는 가장 큰 컴패니언 광고 이미지를 선택합니다. 동영상 플레이어 내에 있어야 하고 동영상 플레이어보다 최소 75픽셀 짧습니다. 광고의 VAST에 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);
}