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的新手，并没有意识到dev和prod版本之间的API差别很大。这里是上面重新工作，你可以使用产品/缩小版本：

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