video.js - VideoJS 読み込みインジケーターが消えない

Question

VideoJS ヘルプはここにリダイレクトされるので、バグ レポートをドロップしたいと思います。ビデオがその場所にロードされているかどうかは問題ではありません。クリックすることもできないため、非表示にすることは非常に理にかなっています。

それに加えて: 素晴らしいプラグイン :) YouTube や Vimeo プレーヤーのようなものです - 素晴らしい仕事を続けてください!

Answer 1

バグ/機能リクエストは、 https ://github.com/videojs/video.js/issues?state=open で提出できます。

これも最初は私を悩ませました。シーク中にローディング スピナーをオフにするだけになりましたが、loadingSpinner を変更してやりたいことを実行するのはそれほど難しくないようです。

以下の例では、最新の 4.1 API を使用していることを前提としています。

/**
 * An event listener meant to be fired for timeupdate events. If the event
 * contained the updated time, we wouldn't need to ask the player, but alas.
 */
videojs.LoadingSpinner.prototype.showIfNotBuffered = function() {
  var time = this.player_.currentTime();
  var timeRanges = this.player().buffered();
  for (var i = 0; i < timeRanges.length; i++) {
    if (time >= timeRanges.start(i) && time <= timeRanges.end(i)) {
      this.hide();
      return;
    }
  }
  this.show();
};

/**
 * Adds a listener for timeupdate events, and modifies state tracking whether
 * we're currently listening to timeupdate events.
 */
videojs.LoadingSpinner.prototype.startTimeUpdateListener = function() {
  if (this.timeUpdatesOn) return;
  this.timeUpdatesOn = true;
  this.player_.on(
    'timeupdate', 
    vjs.bind(this, videojs.LoadingSpinner.prototype.showIfNotBuffered));
};

/**
 * Does the opposite of the above function. Combine?
 */
videojs.LoadingSpinner.prototype.stopTimeUpdateListener = function() {
  if (!this.timeUpdatesOn) return;
  this.player_.off(
    'timeupdate', videojs.LoadingSpinner.prototype.showIfNotBuffered);
  this.timeUpdatesOn = false;
};


/* Video initialization */
var vid = videojs("video", {});

/* First, turn off automatically showing the spinner when seeking. */
vid.player().off('seeking', videojs.LoadingSpinner.prototype.show);

/* Start listening to timeupdates once seeking starts; */
vid.player().on('seeking', vjs.bind(vid.loadingSpinner, videojs.LoadingSpinner.prototype.startTimeUpdateListener));

/* Stop listening to timeupdates once seeking ends. */
vid.player().on('seeked', vjs.bind(vid.loadingSpinner, videojs.LoadingSpinner.prototype.stopTimeUpdateListener));

更新: 上記の例は、縮小されていない dev.js を使用していることを前提としています。私は video.js を初めて使用し、開発バージョンと製品バージョンの API に大きな違いがあることに気づきませんでした。これは、prod/minified バージョンで使用できるものに作り直された上記のものです。

var showIfNotBuffered = function() {
  var time = vid.currentTime();
  var timeRanges = vid.buffered();
  for (var i = 0; i < timeRanges.length; i++) {
    if (time >= timeRanges.start(i) && time <= timeRanges.end(i)) {
      vid.loadingSpinner.hide();
      return;
    }
  }
  vid.loadingSpinner.show();
};

/* Video initialization */
var vid = videojs("video", {}, function() {

  this.off('seeking', this.loadingSpinner.show);

  this.loadingSpinner.startTimeUpdateListener = function() {
    if (this.timeUpdatesOn) return;
    this.on('timeupdate', showIfNotBuffered);
    this.timeUpdatesOn = true;
  };

  this.loadingSpinner.stopTimeUpdateListener = function() {
    if (!this.timeUpdatesOn) return;
    this.off('timeupdate', showIfNotBuffered);
    this.timeUpdatesOn = false;
  };

  this.on('seeking', this.loadingSpinner.startTimeUpdateListener);
  this.on('seeked', this.loadingSpinner.stopTimeUpdateListener);
});