Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

application.js ürününde, 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şimde bulunur. Benzer bir sınıf örneği için Yayın a/v nesnesini işleme başlıklı makaleyi inceleyin.

Bu temel HbbTV uygulamasını, IMA akışı isteyecek ve reklam arası etkinliklerine yanıt verecek şekilde değiştirin.

Uygulamayı başlatma

application.js'te uygulama sınıfını başlatın, Yayın a/v nesnesini işleme başlıklı eğitimdeki talimatları uygulayarak broadcastAppManager ve broadcastContainer öğelerini 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 yayın isteği gönderin. 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 olayını 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 (adBreakAnnounce, adBreakStart ve adBreakEnd) dinlemek için HbbTVApp.onStreamEvent() 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 yayın etkinliklerini işleme

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

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

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

İç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 istiyor ve gösteriyorsunuz. Uygulamanızı tamamlanmış örnek bir uygulamayla karşılaştırmak için GitHub'daki IMA HbbTV örneğini inceleyin.

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