video.js - VideoJS加载指示器不会消失

Question

VideoJS 帮助重定向到这里，所以我想提交一个错误报告:当您将视频搜索器指示器拖动到视频栏上时，加载指示器会出现并且永远不会消失。视频是否加载到该位置并不重要 - 它也不可点击，所以...隐藏它很有意义。

除此之外:一个很棒的插件 :) 就像 YouTube 或 Vimeo 播放器 - 继续努力!

Answer 1

错误/功能请求可以提交至:https://github.com/videojs/video.js/issues?state=open

这最初也困扰着我。我最终只是在搜索过程中关闭了加载旋转器，但修改加载旋转器以执行您想要的操作似乎并不难。

下面的示例假设您使用的是最新的 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);
});