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

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: 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>

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

handling video after video is buffered in javascript

javascript

jquery

html5-video