Как настроить класс игрока

В video_player.js определите класс контейнера видеопроигрывателя, чтобы инициализировать проигрыватель dash.js и управлять им.

Как настроить широкополосный проигрыватель

Определите, где в приложении разместить широкополосный проигрыватель, создав теги видео и теги-обертки:

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>

Как создать видеопроигрыватель

Инициализируйте класс видеопроигрывателя с переменными для элементов HTML, проигрывателя dash.js и обратных вызовов, которые могут использовать другие методы класса.

/**
 * 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');
};

Как задать функции управления воспроизведением

Чтобы показать проигрыватель и прикрепить просмотр видео, создайте метод VideoPlayer.play(). Затем создайте метод VideoPlayer.stop(), который будет выполнять очистку после завершения пакетов объявлений.

/** 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();
};

Предварительная загрузка манифеста рекламного потока

Чтобы убедиться, что объявления загружены достаточно быстро во время трансляции контента и до начала рекламной паузы, используйте VideoPlayer.preload() и VideoPlayer.isPreloaded().

1. Предварительная загрузка потока объявлений

Создайте метод VideoPlayer.preload(), чтобы предварительно загрузить манифест рекламного потока и создать буфер объявлений до рекламной паузы. Вам нужно изменить настройки потоковой передачи в проигрывателе с 'cacheInitSegments' на true. Обновив настройки, вы включите кеширование сегментов инициализации, что позволит избежать задержек при переходе к рекламе.

/**
 * 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');
};

2. Проверьте буфер предварительно загруженных объявлений

Создайте метод VideoPlayer.isPreloaded(), чтобы проверить, достаточно ли предварительно загруженного буфера рекламы по сравнению с пороговым значением, заданным в приложении:

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;
 
/**
 * 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;
};

Прикрепите прослушиватели проигрывателя

Чтобы добавить прослушиватели событий для событий проигрывателя dash.js, создайте метод VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG и ERROR. Этот метод также обрабатывает события для URI идентификатора схемы и задает функцию очистки для удаления этих прослушивателей.

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
 
/** 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);
    }
  };
};

Как настроить обратные вызовы событий проигрывателя

Чтобы управлять воспроизведением пакета объявлений на основе событий проигрывателя, создайте методы VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded() и VideoPlayer.onAdPodError():

/**
 * 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();
  }
};

Как создать функцию установки для события onAdPodEnded

Создайте метод VideoPlayer.setOnAdPodEnded(), чтобы задать функцию обратного вызова, которая будет выполняться после завершения пакета объявлений. Класс приложения использует этот метод, чтобы возобновить трансляцию контента после рекламных пауз.

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

Обработка событий метаданных потока

Задайте функцию обратного вызова, которая будет выполняться на основе событий emsg, создав метод VideoPlayer.setEmsgEventHandler(). В этом руководстве мы будем использовать параметр scope, поскольку setEmsgEventHandler() вызывается вне video_player.js.

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

Как показывать и скрывать видеопроигрыватель для рекламных пауз

Чтобы показывать видеопроигрыватель во время рекламных пауз и скрывать его после их завершения, создайте методы VideoPlayer.show() и VideoPlayer.hide():

/** 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';
};

Затем создайте класс менеджера рекламы, чтобы использовать IMA SDK для отправки запроса трансляции, получения манифеста пакета объявлений, прослушивания событий трансляции IMA и передачи событий emsg в IMA SDK.

Назад
Как начать работу с HbbTV
Далее
Создайте класс менеджера объявлений