Oyuncu sınıfını ayarlama

Not: Bu kılavuzda ilerlemeden önce HbbTV'de IMA SDK'sını 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ı etiketleri oluşturarak uygulamanızın neresine geniş bant oynatıcıyı yerleştireceğinizi 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ı 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ülemesini eklemek için VideoPlayer.play() yöntemini oluşturun. Ardından, reklam kapsülleri tamamlandıktan sonra temizleme işlemini gerçekleştirmek için VideoPlayer.stop() 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ükleyin

Reklamların içerik akışı sırasında ve reklam arası başlamadan önce yeterince yüklendiğinden emin olmak için VideoPlayer.preload() ve VideoPlayer.isPreloaded() öğelerini kullanın.

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

Reklam akışı manifestini önceden yüklemek ve reklam arasından önce reklam arabelleği oluşturmak için VideoPlayer.preload() yöntemini oluşturun. 'cacheInitSegments' oynatıcı akış ayarlarını true olarak güncellemeniz gerekiyor. Ayarları güncelleyerek başlangıç segmentlerinin önbelleğe alınmasını sağlarsınız. Bu, reklamlara geçişte gecikmeleri önler.

/**
 * 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 bir arabellek eşiğine kıyasla yeterli miktarda 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şleyici ekle

dash.js oynatıcı etkinliği için etkinlik işleyiciler eklemek üzere VideoPlayer.attachPlayerListener() yöntemini oluşturun: PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG ve ERROR. Bu yöntem, bu işleyicileri kaldırmak için temizleme işlevini ayarlamaya ek olarak şema kimliği URI'si 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

Oyuncu etkinliği geri çağırmaları ayarla

Oynatıcı etkinliklerine göre reklam kapsülü oynatmayı 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 setter oluştur

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 yayınlanan içeriği 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

Akış meta verisi etkinliklerini işleme

VideoPlayer.setEmsgEventHandler() yöntemini oluşturarak emsg etkinliklerine dayalı olarak çalışan bir geri çağırma işlevi ayarlayın. Bu kılavuzda, setEmsgEventHandler() parametresini video_player.js dışında çağırdığınızda scope parametresini ekleyin.

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

Video oynatıcıyı reklam araları için 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ği yapmak, reklam kapsülü manifest'i almak, IMA yayın etkinliklerini dinlemek ve emsg etkinliklerini IMA SDK'sına iletmek için IMA SDK'yı kullanacak bir Ads Manager sınıfı oluşturun.