處理視頻緩存後的視頻在javascript中

Question

準確地說，我需要在視頻緩衝後處理我的WEBAPP視頻。 通過使用Google我發現用於緩衝event handler將是：

video.onwaiting = function(){ 
    $(".buffering").show(); 
}; 

buffereing的元件是當視頻需要緩衝出現裝載機。

現在我需要處理視頻緩衝5秒鐘後，所以我可以使用$("buffering").hide();來隱藏我的buffering。

到目前爲止我做：

video.addEventListener('progress', function() { 
    var range = 0; 
    var bf = this.buffered; 
    var time = this.currentTime; 

    while(!(bf.start(range) <= time && time <= bf.end(range))) { 
     range += 1; 
    } 
    var loadStartPercentage = bf.start(range)/this.duration; 
    var loadEndPercentage = bf.end(range)/this.duration; 
    var loadPercentage = loadEndPercentage - loadStartPercentage; 
    val = loadPercentage*100; 
}); 

如果可以，爲什麼我收到此錯誤：

IndexSizeError: Index or size is negative or greater than the allowed amount on line while();

所以我會很感激，如果有人能告訴我如何處理視頻在持續5秒後進行緩衝。

問候:)

Answer 1

起初progress事件，由buffered返回TimeRanges是空的。所以請求它的開始或結束會拋出IndexSize錯誤。

而且，參數TimeRanges.start和TimeRanges.end是需要TIMERANGE的指標，它不能低於0及以上TimeRanges.length，你可以改用while循環：

video.addEventListener('progress', function() { 
 
    var bf = this.buffered; 
 
    var time = this.currentTime; 
 
    if(!bf.length){ 
 
     return; 
 
     } 
 
    var loadStartPercentage = bf.start(0)/this.duration; 
 
    var loadEndPercentage = bf.end(bf.length-1)/this.duration; 
 
    var loadPercentage = loadEndPercentage - loadStartPercentage; 
 
    var val = loadPercentage*100; 
 
    console.log(val); 
 
});

<video id="video" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4" muted="true" controls></video>