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

Not: Bu kılavuzla devam etmeden önce Reklam yöneticisi sınıfını oluşturma bölümündeki adımları tamamlamanız gerekir.

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

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ınlanan a/v nesnesini işleme başlıklı eğitime göre 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çişine yanıt olarak bir akış isteğinde bulunun. Bu yaklaşım, uygulamanızı bir AD_BREAK_EVENT_ANNOUNCE etkinliğine yanıt olarak reklam kapsülü 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 kapsülü 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österiyorsunuz. Uygulamanızı tamamlanmış bir örnek uygulamayla karşılaştırmak için GitHub'daki IMA HbbTV örneğine bakın.