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