Oyuncu sınıfını ayarlama

Not: Bu kılavuzla devam etmeden önce HbbTV'de IMA SDK'yı kullanmaya başlama bölümündeki adımları tamamlamanız gerekir.

video_player.js içinde, dash.js oynatıcıyı başlatmak ve kontrol etmek için bir video oynatıcı sarmalayıcı sınıfı tanımlayın.

Geniş bant oynatıcıyı ayarlama

Video ve sarmalayıcı etiketler oluşturarak uygulamanızda geniş bant oynatıcının nereye yerleştirileceğini tanımlayın:

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>
index.html

Video oynatıcıyı oluşturma

Video oynatıcı sınıfını HTML öğeleri, dash.js oynatıcısı ve diğer sınıf yöntemlerinin kullanabileceği geri çağırma işlevleri için değişkenlerle başlatın.

/**
 * Video player wrapper class to control ad creative playback with dash.js in
 * broadband.
 */
var VideoPlayer = function() {
  this.videoElement = document.querySelector('video');
  this.broadbandWrapper = document.getElementById('broadband-wrapper');
  this.player = dashjs.MediaPlayer().create();
  this.onAdPodEndedCallback = null;

  // Function passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.onCustomEventHandler = null;
  //  Scope (this) passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.customEventHandlerScope = null;

  // Function to remove all of player event listeners.
  this.cleanUpPlayerListener = null;
  debugView.log('Player: Creating dash.js player');
};
video_player.js

Oynatma kontrolü işlevlerini tanımlama

Reklam oynatıcıyı göstermek ve video görüntülemeyi eklemek için VideoPlayer.play() yöntemini oluşturun. Ardından, reklam kapsülleri tamamlandıktan sonra temizliği yönetecek VideoPlayer.stop() oluşturma yöntemini oluşturun.

/** Starts playback of ad stream. */
VideoPlayer.prototype.play = function() {
  debugView.log('Player: Start playback');
  this.show();
  this.player.attachView(this.videoElement);
};

/** Stops ad stream playback and deconstructs player. */
VideoPlayer.prototype.stop = function() {
  debugView.log('Player: Request to stop player');
  if (this.cleanUpPlayerListener) {
    this.cleanUpPlayerListener();
  }
  this.player.reset();
  this.player.attachView(null);
  this.player.attachSource(null);
  this.player = null;
  this.hide();
};
video_player.js

Reklam akışı manifestini önceden yükleme

İçerik yayını sırasında ve reklam arası başlamadan önce reklamların yeterince yüklendiğini doğrulamak için VideoPlayer.preload() ve VideoPlayer.isPreloaded() kullanın.

1. Reklam akışını önceden yükleme

Reklam akışı manifestini önceden yüklemek ve reklam arasından önce reklam arabelleği oluşturmak için VideoPlayer.preload() yöntemini oluşturun. Oynatıcı yayın ayarlarını 'cacheInitSegments' yerine true olarak güncellemeniz gerekir. Ayarları güncelleyerek init segmentlerinin önbelleğe alınmasını etkinleştirirsiniz. Bu sayede, reklamlara geçiş sırasında gecikmeler önlenir.

/**
 * Starts ad stream prefetching into Media Source Extensions (MSE) buffer.
 * @param {string} url manifest url for ad stream playback.
 */
VideoPlayer.prototype.preload = function(url) {
  if (!this.player) {
    this.player = dashjs.MediaPlayer().create();
  }
  debugView.log('Player: init with ' + url);
  this.player.initialize(/* HTMLVideoElement */ null, url, /* autoplay */ true);

  this.player.updateSettings({
    'debug': {
      'logLevel': dashjs.Debug.LOG_LEVEL_WARNING,
      'dispatchEvent': true,  // flip to false to hide all debug events.
    },
    'streaming': {
      'cacheInitSegments': true,
    }
  });
  this.player.preload();
  this.attachPlayerListener();
  debugView.log('Player: Pre-loading into MSE buffer');
};
video_player.js

2. Önceden yüklenmiş reklam arabelleğini kontrol etme

Uygulamada ayarlanan arabellek eşiğine kıyasla yeterli reklam arabelleğinin önceden yüklenip yüklenmediğini kontrol etmek için VideoPlayer.isPreloaded() yöntemini oluşturun:

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;
video_player.js

/**
 * Checks if the ad is preloaded and ready to play.
 * @return {boolean} whether the ad buffer level is sufficient.
 */
VideoPlayer.prototype.isPreloaded = function() {
  var currentBufferLevel = this.player.getDashMetrics()
      .getCurrentBufferLevel('video', true);
  return currentBufferLevel >= MIN_BUFFER_THRESHOLD;
};
video_player.js

Oynatıcı işleyicileri ekleme

dash.js oynatıcı etkinliği için etkinlik dinleyicileri eklemek üzere VideoPlayer.attachPlayerListener() yöntemini oluşturun: PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG ve ERROR. Bu yöntem, temizleme işlevini bu dinleyicileri kaldıracak şekilde ayarlamanın yanı sıra şema kimliği URI'sinin etkinliklerini de işler.

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
video_player.js

/** Attaches event listener for various dash.js events.*/
VideoPlayer.prototype.attachPlayerListener = function() {
  var playingHandler = function() {
    this.onAdPodPlaying();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
  var endedHandler = function() {
    this.onAdPodEnded();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
  var logHandler = function(e) {
    this.onLog(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['LOG'], logHandler);
  var errorHandler = function(e) {
    this.onAdPodError(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['ERROR'], errorHandler);

  var customEventHandler = null;
  if (this.onCustomEventHandler) {
    customEventHandler =
        this.onCustomEventHandler.bind(this.customEventHandlerScope);
    this.player.on(SCHEME_ID_URI, customEventHandler);
  }

  this.cleanUpPlayerListener = function() {
    this.player.off(
        dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
    this.player.off(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
    this.player.off(dashjs.MediaPlayer.events['LOG'], logHandler);
    this.player.off(dashjs.MediaPlayer.events['ERROR'], errorHandler);
    if (customEventHandler) {
      this.player.off(SCHEME_ID_URI, customEventHandler);
    }
  };
};
video_player.js

Oynatıcı etkinliği geri çağırma işlevlerini ayarlama

Reklam kapsülü oynatmayı oynatıcı etkinliklerine göre yönetmek için VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded() ve VideoPlayer.onAdPodError() yöntemlerini oluşturun:

/**
 * Called when ad stream playback buffered and is playing.
 */
VideoPlayer.prototype.onAdPodPlaying = function() {
  debugView.log('Player: Ad Playback started');
};

/**
 * Called when ad stream playback has been completed.
 * Will call the restart of broadcast stream.
 */
VideoPlayer.prototype.onAdPodEnded = function() {
  debugView.log('Player: Ad Playback ended');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};

/**
 * @param {!Event} event The error event to handle.
 */
VideoPlayer.prototype.onAdPodError = function(event) {
  debugView.log('Player: Ad Playback error from dash.js player.');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};
video_player.js

onAdPodEnded etkinliği için ayarlayıcı oluşturun

VideoPlayer.setOnAdPodEnded() yöntemini oluşturarak bir reklam kapsülü sona erdiğinde çalışan bir geri çağırma işlevi ayarlayın. Uygulama sınıfı, reklam aralarından sonra içerik yayınını devam ettirmek için bu yöntemi kullanır.

/**
 * Sets a callback function for when an ad pod has ended.
 * @param {!Function} callback Callback function.
 */
VideoPlayer.prototype.setOnAdPodEnded = function(callback) {
  this.onAdPodEndedCallback = callback;
};
video_player.js

Yayın meta verileri etkinliklerini işleme

VideoPlayer.setEmsgEventHandler() yöntemini oluşturarak emsg etkinliklerine göre çalışan bir geri çağırma işlevi ayarlayın. Bu kılavuz için, scope parametresini ekleyin. Çünkü setEmsgEventHandler() öğesini video_player.js dışında çağırıyorsunuz.

/**
 * Sets emsg event handler.
 * @param {!Function} customEventHandler Event handler.
 * @param {!Object} scope JS scope in which event handler function is called.
 */
VideoPlayer.prototype.setEmsgEventHandler = function(
    customEventHandler, scope) {
  this.onCustomEventHandler = customEventHandler;
  this.customEventHandlerScope = scope;
};
video_player.js

Reklam araları için video oynatıcıyı gösterme ve gizleme

Reklam araları sırasında video oynatıcıyı göstermek ve reklam arası bittikten sonra oynatıcıyı gizlemek için VideoPlayer.show() ve VideoPlayer.hide() yöntemlerini oluşturun:

/** Shows the video player. */
VideoPlayer.prototype.show = function() {
  debugView.log('Player: show');
  this.broadbandWrapper.style.display = 'block';
};

/** Hides the video player. */
VideoPlayer.prototype.hide = function() {
  debugView.log('Player: hide');
  this.broadbandWrapper.style.display = 'none';
};
video_player.js

Ardından, akış isteğinde bulunmak, reklam grubu manifesti almak, IMA akış etkinliklerini dinlemek ve emsg etkinliklerini IMA SDK'ya iletmek için IMA SDK'yı kullanmak üzere bir reklam yöneticisi sınıfı oluşturun.