VideoJS loading indicator does not disappear

Bugs / feature requests can be submitted to: https://github.com/videojs/video.js/issues?state=open

That beat me too. I ended up just disabling the bootloader when searching, but it seems hard to me to change the bootloader to do what you want.

The example below assumes you are using the latest 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));

      

        
        
        
      

    

UPDATE. The example above assumes you are using un-minified dev.js. I am new to .js video and do not understand that there is a big difference in API between dev and prod versions. Below is the above where you can use the prod / minified version:

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);
});