处理视频缓存后的视频在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>