CODEWITHSUNDEEP
video.js
Atadj
Atadj

Reputation: 7180

VideoJS loading indicator doesn't disappear

VideoJS help redirects here so I'd like to drop a bug report: when you drag the video seeker indicator on video bar loading indicator appears and never disappears. It doesn't matter if video is loaded in that place or not - it is also not clickable so... it makes a lot of sense to just hide it.

Besides that: a great plugin :) It's like YouTube or Vimeo player - keep up the great work!

Upvotes: 3

Views: 3934

Answers (1)

Cameron Tangney
Cameron Tangney

Reputation: 678

Bugs/Feature Requests can be filed at: https://github.com/videojs/video.js/issues?state=open

This bugged me initially too. I ended up just turning the loading spinner off during seeking, but it doesn't seem that hard to modify the loadingSpinner to do what you want it to.

The example below assumes you're 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're using the un-minified dev.js. I'm new to video.js, and didn't realize there was a big difference in the API between the dev and prod versions. Here is the above re-worked into something you can use with 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);
});

Upvotes: 1

Related Questions