javascript - 在 javascript 中缓冲视频后处理视频

Question

准确地说，我需要在视频缓冲后处理我的WEBAPP视频。 通过谷歌搜索，我发现缓冲事件处理程序将是:

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

buffereing 元素是一个加载器，当视频需要缓冲时出现。

现在我需要在缓冲 5 秒后处理视频，因此我可以使用 $("buffering").hide(); 来隐藏我的 缓冲.

到目前为止我正在做:

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>