애플리케이션 클래스 빌드

application.js에서 HbbTV 방송과 상호작용하는 HbbTV 앱의 기본 클래스를 만듭니다. 이 클래스는 broadcastAppManager 및 broadcastContainer와 상호작용합니다. 유사한 클래스의 예는 브로드캐스트 a/v 객체 처리를 참고하세요.

이 기본 HbbTV 앱을 수정하여 IMA 스트림을 요청하고 광고 시점 이벤트에 응답합니다.

애플리케이션 초기화

application.js에서 애플리케이션 클래스를 초기화하고 튜토리얼 브로드캐스트 a/v 객체 처리에 따라 broadcastAppManager 및 broadcastContainer를 설정합니다. 그런 다음 새 VideoPlayer 및 AdManager 객체를 시작합니다.

/** Main HbbTV Application. */
var HbbTVApp = function() {
  this.broadcastAppManager = document.getElementById('broadcast-app-manager');
  this.broadcastContainer = document.getElementById('broadcast-video');

  this.playState = -1; // -1 as null play state.

  try {
    this.applicationManager =
        this.broadcastAppManager.getOwnerApplication(document);
    this.applicationManager.show();
    this.broadcastContainer.bindToCurrentChannel();
    this.subscribedToStreamEvents = false;
    this.broadcastContainer.addEventListener(
        'PlayStateChange', this.onPlayStateChangeEvent.bind(this));

    debugView.log('HbbTVApp: App loaded');
    this.videoPlayer = new VideoPlayer();
    this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this));
  } catch (e) {
    debugView.log('HbbTVApp: No HbbTV device detected.');
    return;
  }

  this.adManager = new AdManager(this.videoPlayer);
};application.js

IMA 스트림 요청하기

HbbTVApp.onPlayStateChangeEvent() 메서드에서 앱이 PRESENTING_PLAYSTATE로 전환되는 것에 대한 응답으로 스트림 요청을 합니다. 이 접근 방식은 AD_BREAK_EVENT_ANNOUNCE 이벤트에 응답하여 광고 애드온 매니페스트를 로드하도록 앱을 준비합니다.

if (!this.subscribedToStreamEvents &&
    this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
  this.subscribedToStreamEvents = true;
  this.broadcastContainer.addStreamEventListener(
      STREAM_EVENT_URL, 'eventItem', function(event) {
        this.onStreamEvent(event);
      }.bind(this));
  debugView.log('HbbTVApp: Subscribing to stream events.');
  this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
}application.js

기기에서 브로드캐스트 컨테이너 PlayStateChange 이벤트를 올바르게 내보내지 않으면 setInterval() 함수를 사용하여 재생 상태 변경을 확인합니다.

setInterval(function() {
      if (!subscribedToStreamEvents &&
            this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
        subscribedToStreamEvents = true;
        this.broadcastContainer.addStreamEventListener(
            STREAM_EVENT_URL, 'eventItem', function(event) {
              this.onStreamEvent(event);
            }.bind(this));
        debugView.log('Subscribing to stream events');
        this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
      }
      …

HbbTV 스트림 이벤트 수신

광고 시점 이벤트 adBreakAnnounce, adBreakStart, adBreakEnd를 수신하는 HbbTVApp.onStreamEvent() 메서드를 만듭니다.

/**
 * Callback for HbbTV stream event.
 * @param {!Event} event Stream event payload.
 */
HbbTVApp.prototype.onStreamEvent = function(event) {
  var eventData = JSON.parse(event.text);
  var eventType = eventData.type;
  if (eventType == AD_BREAK_EVENT_ANNOUNCE) {
    this.onAdBreakAnnounce(eventData);
  } else if (eventType == AD_BREAK_EVENT_START) {
    this.onAdBreakStart(eventData);
  } else if (eventType == AD_BREAK_EVENT_END) {
    this.onAdBreakEnd(eventData);
  }
};application.js

HbbTV 스트림 이벤트 처리

HbbTV 스트림 이벤트를 처리하려면 다음 단계를 완료하세요.

adBreakAnnounce 이벤트에 응답하여 광고 모음 매니페스트를 로드하려면 HbbTVApp.onAdBreakAnnounce() 메서드를 만듭니다.

/**
 * Callback function on ad break announce stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakAnnounce = function(event) {
  var eventType = event.type;
  var eventDuration = event.duration;
  var eventOffset = event.offset;
  debugView.log(
      'HbbTV event: ' + eventType + ' duration: ' + eventDuration +
      's offset: ' + eventOffset + 's');
  this.adManager.loadAdPodManifest(NETWORK_CODE, CUSTOM_ASSET_KEY, eventDuration);
};application.js

광고 시점에 광고 스트림 재생으로 전환하려면 HbbTVApp.onAdBreakStart() 메서드를 만듭니다.

/**
 * Callback function on ad break start stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakStart = function(event) {
  debugView.log('HbbTV event: ' + event.type);
  if (!this.videoPlayer.isPreloaded()) {
    debugView.log('HbbTVApp: Switch aborted. ' +
                  'The ad preloading buffer is insufficient.');
    return;
  }
  this.stopBroadcast();
  this.videoPlayer.play();
};application.js

콘텐츠 브로드캐스트로 돌아가려면 HbbTVApp.onAdBreakEnd() 메서드를 만듭니다.

/**
 * Callback function on ad break end stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakEnd = function(event) {
  debugView.log('HbbTV event: ' + event.type);
  this.videoPlayer.stop();
  this.resumeBroadcast();
};application.js

이제 HbbTV 앱에서 IMA SDK 광고 애드팟을 요청하고 표시합니다. 앱을 완료된 샘플 앱과 비교하려면 GitHub의 IMA HbbTV 샘플을 참고하세요.

광고 관리자 클래스 만들기