광고 규칙

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는 설정된 경우 포스트롤 광고 시점입니다. 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();
}

사용해 보기

아래에서 실제 구현을 확인할 수 있습니다.

<ph type="x-smartling-placeholder">

탐색의 문제

광고 규칙을 사용하면 클릭 앤 드래그 탐색에 문제가 발생할 수 있습니다. 특히 사용자가 여러 개의 곳을 클릭하여 동영상을 탐색한 후 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 속성이 아닌 동영상 플레이어입니다.