HTML5 视频缓冲区封顶答案

【问题标题】：HTML5 Video Buffer Capping OutHTML5 视频缓冲区封顶
【发布时间】：2025-12-20 21:30:05
【问题描述】：

我有以下功能：

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) 甚至返回？

【问题讨论】：

标签： jquery html html5-video

【解决方案1】：

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

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

在任何情况下，你都可以解析缓冲的段 -

例如：

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 加载了哪些部件。

【讨论】：