HTML5 视频缓冲区上限

Question

我有以下功能：

var progress = function(n, v0, derivativeSum) {
    var v1 = stimulus.prop("buffered").end(0);

    if(v0 == null) {
        setTimeout(function() {progress(++n, v1, 0)}, 50);
        return;
    }

    console.log("buffered: " + v1);
    console.log("buff.length " + stimulus.prop("buffered").length);
    derivativeSum += v1 - v0;

    // In seconds
    averageRate = derivativeSum / (n * .05);

    // In seconds
    timeleftToDownload = (duration - v1) / averageRate;

    console.log(timeleftToDownload + " < " + v1);
    console.log("average rate: " + averageRate);

    if (timeleftToDownload < v1 / 20) {
        showPlayButton();
        return;
    }

    // Callback 50 millisecond delay
    setTimeout(function() {progress(++n, v1, derivativeSum)}, 50);
};

这只是测试代码，所以逻辑不需要讲得通。但是我只是想知道视频已经加载了多少秒，因为我可以将它与我在 loadmetadata 中获得的视频持续时间进行比较。

    // Should be the length of the video buffered, example: 2304 seconds
    var v1 = stimulus.prop("buffered").end(0);

不过 v1 好像是 128 的上限。既然我有一个很长的视频，它显然应该更长。 .end(0) 甚至返回什么？

Answer 1

buffered 对象可以包含多个段，因此您需要遍历每个段的开始和结束属性。也不能保证单个段代表整个长度。

后者更有可能用于长视频，因为浏览器会尽量避免填满客户端磁盘，而是缓冲它认为合适的较小片段，删除旧的（从磁盘）等等。

无论如何，要解析缓冲段，您可以这样做 -

例如：

var buffered = video.buffered,
    segments = buffered.length,
    totalTime = 0,
    i;

for(i = 0; i < segments; i++) {
    var startTime = buffered.start(i);  // absolute start time for this segment
    var endTime = buffered.end(i);      // absolute end time for this segment
    var diff = endTime - startTime;
    totalTime += diff;
}

现在您可以将总和与持续时间进行比较，以查看视频是否已完全加载，或者是否只有一个片段可用查看 start(0) 是否等于 0 和 end(0) 是否等于持续时间（不太可能很长视频），或使用片段 graphically indicate 加载了哪些部分。

HTML5 视频缓冲区上限

HTML5 Video Buffer Capping Out

jquery

html

html5-video