Question

准确地说，我需要在视频缓冲后处理我的WEBAPP视频。通过谷歌搜索我发现缓冲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：索引或大小为负数或大于允许的数量在线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>

在javascript中缓存视频后处理视频

1 个答案: