이 페이지는 Cloud Translation API를 통해 번역되었습니다.

광고 규칙

IMA HTML5 SDK는 완전히 자동화된 광고 재생목록을 지원합니다. 이 기능은 광고를 트래피킹할 때 Google Ad Manager에 지정된 콘텐츠에 광고 시점을 삽입합니다. 또한 프리롤, 미드롤, 포스트롤을 비롯한 광고 시점을 지원하는 데 필요한 동영상 플레이어 코드도 크게 간소화됩니다.

AdsManager를 만들 때 contentPlayback 객체가 getAdsManager 호출을 통해 전달됩니다. 이 객체에는 동영상의 현재 플레이헤드 위치를 반환하는 currentTime 속성이 있어야 합니다. HTML5 video 요소를 사용하여 콘텐츠를 표시하는 경우 이 요소를 SDK에 전달하기만 하면 됩니다. 이 객체는 Ad Manager에서 지정된 시간에 광고 시점이 자동으로 삽입되도록 콘텐츠 재생 진행률을 추적하는 데 사용됩니다. 또한 나를 대신하여 콘텐츠 상태를 처리하고 싶다고 SDK에 알려야 합니다.
```
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
```

포스트롤이 재생되도록 하려면 콘텐츠가 완료된 시점을 SDK에 알려야 합니다. 이는 SDK가 동영상 플레이어를 사용하여 광고를 재생하는 경우도 있으므로 광고 종료가 아닌 콘텐츠가 완료된 시점에만 SDK에 알려야 하기 때문입니다. 아래 코드를 사용하면 됩니다.

var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}

CONTENT_PAUSE_REQUESTED 및 CONTENT_RESUME_REQUESTED 이벤트는 광고 시점이 재생될 때 콘텐츠를 일시중지하고 재개하는 데 사용됩니다.
동영상 플레이어에서 드래그하여 찾기를 지원하고 사용자가 드래그하는 동안 동영상 플레이어의 현재 시간 속성이 업데이트되는 경우 SDK는 정상적으로 진행되는 콘텐츠와 콘텐츠를 탐색하는 사용자를 구분할 수 없습니다. 맞춤 contentPlayback 객체를 getAdsManager의 매개변수로 사용해야 합니다. 이 사용 사례의 예는 탐색 문제 해결을 참고하세요.

참고: 콘텐츠 재생이 완료되었거나 사용자가 재생을 중지했다면 AdsLoader.contentComplete를 호출하여 콘텐츠가 완료되었음을 SDK에 알려야 합니다. 그러면 SDK는 포스트롤 광고 시점이 예약된 경우 이를 재생합니다. ALL_ADS_COMPLETED 이벤트는 모든 광고 시점이 재생되면 발생합니다. 또한 콘텐츠 추적은 init()가 호출되면 시작되므로 콘텐츠를 재생하기 전에 항상 init()를 호출해야 합니다.

광고 시점 자동 재생 사용 중지

경우에 따라 준비가 될 때까지 SDK에서 광고 시점을 재생하지 않는 것이 좋습니다. 이 경우에는 광고 시점 자동 재생을 사용 중지하고 광고 시점을 재생할 준비가 되었음을 SDK에 알릴 수 있습니다. 이 구성을 사용하면 SDK가 광고 시점을 로드하면 AD_BREAK_READY 이벤트가 실행됩니다. 플레이어가 광고 시점을 시작할 준비가 되면 adsManager.start()를 호출할 수 있습니다.

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

사용해 보기

아래에서 실제로 작동하는 구현을 확인할 수 있습니다.

탐색 시 문제

광고 규칙을 사용하면 클릭 앤 드래그 탐색에 문제가 발생할 수 있습니다. 특히 사용자가 클릭하고 드래그하여 여러 미드롤 광고 모음을 지나 동영상을 탐색하면 콘텐츠가 재개되기 전에 이러한 광고 모음이 2개 이상 연달아 재생되는 것을 볼 수 있습니다. 이 문제는 사용자가 탐색하는 동안 동영상 플레이헤드 시간이 업데이트되기 때문에 발생합니다. 사용자가 광고를 탐색하는 동안 SDK가 현재 시간을 폴링하면 광고가 재생되어야 한다고 생각할 수 있습니다. 콘텐츠가 재개되면 해당 광고를 재생한 다음 탐색한 후 가장 최근의 광고를 재생합니다. 이 문제를 시각적으로 보려면 아래 다이어그램을 참조하세요.

이 문제를 해결하는 간단한 방법은 사용자가 탐색을 시작할 때 현재 시간을 절약하고 사용자가 일반 재생을 다시 시작할 때까지 SDK에서 요청할 때 시간을 보고하는 것입니다. 이 솔루션을 시각적으로 보려면 아래 다이어그램을 참고하세요.

이 솔루션을 사용하면 0:10 미드롤을 적절하게 건너뛰고 0:20 미드롤만 재생합니다. 아래와 같이 맞춤 플레이헤드 추적기를 사용하면 됩니다. 아래 코드에는 다운로드 페이지에서 제공되는 고급 HTML5 샘플에서 ads.js의 수정사항 (굵게 표시됨)이 포함되어 있습니다.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

모바일 Safari의 알려진 문제

이 방법은 모바일 Safari를 제외한 모든 플랫폼에서 작동합니다. 모바일 Safari에서는 동영상 태그의 탐색 속성이 제대로 구현되지 않습니다 (항상 false를 반환함). 이 문제를 해결하려면 사용자가 동영상을 탐색하는지 직접 확인해야 합니다. 다음은 이 메서드의 샘플 코드입니다. 앞서 언급했듯이, 아래에서 굵게 표시된 줄은 기존 코드를 수정한 것입니다.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

이러한 변경으로 이제 SDK에서 Ads 객체의 currentTime 속성을 사용하여 콘텐츠 동영상 플레이어의 currentTime 속성이 아닌 광고 시점을 재생할 시점을 결정합니다.