Uygulama sınıfını oluşturma

application.js içinde, HbbTV yayınıyla etkileşim kuran HbbTV uygulamanız için ana sınıfı oluşturun. Bu sınıf, broadcastAppManager ve broadcastContainer ile etkileşimde bulunur. Benzer bir sınıf örneği için Yayın a/v nesnesini işleme başlıklı makaleyi inceleyin.

IMA akışı istemek ve reklam arası etkinliklerine yanıt vermek için bu temel HbbTV uygulamasını değiştirin.

Uygulamayı başlatma

application.js içinde uygulama sınıfını başlatın, broadcastAppManager ve broadcastContainer öğelerini, Yayın a/v nesnesini işleme başlıklı eğitimdeki adımları uygulayarak ayarlayın. Ardından, yeni VideoPlayer ve AdManager nesneleri başlatın.

/** 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 akış isteğinde bulunma

HbbTVApp.onPlayStateChangeEvent() yönteminde, uygulamanın PRESENTING_PLAYSTATE'e geçmesine yanıt olarak bir akış isteğinde bulunun. Bu yaklaşım, uygulamanızı bir AD_BREAK_EVENT_ANNOUNCE etkinliğine yanıt olarak reklam grubu manifestini yüklemeye hazırlar.

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

Cihazınız yayın kapsayıcısı PlayStateChange etkinliğini doğru şekilde yayınlamıyorsa oynatma durumu değişikliklerini kontrol etmek için setInterval() işlevini kullanın:

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 yayın etkinliklerini dinleme

Reklam arası etkinliklerini (HbbTVApp.onStreamEvent(), adBreakAnnounce ve adBreakStart) dinlemek için adBreakEnd yöntemini oluşturun:

/**
 * 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 akış etkinliklerini işleme

HbbTV akış etkinliklerini işlemek için aşağıdaki adımları tamamlayın:

  1. adBreakAnnounce etkinliğine yanıt olarak reklam grubu manifestini yüklemek için HbbTVApp.onAdBreakAnnounce() yöntemini oluşturun:

    /**
 * 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

  2. Reklam araları sırasında reklam akışı oynatmaya geçmek için HbbTVApp.onAdBreakStart() yöntemini oluşturun:

    /**
 * 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

  3. İçerik yayınına dönmek için HbbTVApp.onAdBreakEnd() yöntemini oluşturun:

    /**
 * 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

Artık HbbTV uygulamanızda IMA SDK reklam kapsülleri isteyip görüntülüyorsunuz. Uygulamanızı tamamlanmış bir örnek uygulamayla karşılaştırmak için GitHub'daki IMA HbbTV örneğine bakın.

Önceki
Ads Manager sınıfını oluşturma