javascript - HTML5 Video buffered 属性特性

Question

我正在设计一个自定义 HTML5 视频播放器。因此，它将有自己的自定义 slider 来模拟视频进度，因此我需要了解 HTML5 视频的整个缓冲过程。

我看到了这篇文章:Video Buffering .它表示缓冲对象由几个时间范围组成，这些时间范围按开始时间的线性顺序排列。但我找不到以下内容:

1. 说视频开始。它自己持续到 1:45(偶尔可能会停顿，等待进一步的数据)，之后我突然跳到 32:45。现在过了一段时间，如果我跳回到 1:27(在我跳转之前最初加载和播放的时间范围内)，它会立即开始播放吗，因为它之前已经加载过？还是因为我跳了，那部分丢失了，必须重新取回？无论哪种方式，所有此类场景的行为是否一致？

2. 假设我进行了 5 或 6 次这样的跳跃，每次跳跃后都等待几秒钟以加载一些数据。这是否意味着 buffered 对象将存储所有这些时间范围？或者有些人可能会迷路？它是一种堆栈类型的东西吗？随着更多范围的进一步跳跃，较早的范围将被弹出？

3. 检查buffered对象是否有一个从0开始(忘记直播)到视频持续时间长度结束的时间范围是否确保整个视频资源已经加载完毕？如果没有，有什么方法可以知道整个视频已经下载，并且可以找到任何部分，视频可以从那里连续播放到结束，没有片刻的延迟？

W3C 规范对此不是很清楚，我也找不到合适的大(比如一个多小时)远程视频资源来测试。

Answer 1

视频的缓冲方式取决于浏览器的实现方式，因此可能因浏览器而异。

不同的浏览器可以使用不同的因素来决定保留或丢弃缓冲区的一部分。旧段、磁盘空间、内存和性能是典型因素。

了解的唯一方法是“查看”浏览器拥有或正在加载的内容。

例如 - 在 Chrome 中，我播放了几秒钟，然后跳到大约 30 秒，您可以看到它开始从该位置开始加载另一个部分。

(缓冲区似乎也受关键帧限制，因此可以解码该缓冲区中的 n 帧。这意味着缓冲区可以在实际位置之前一点开始加载数据)。

我提供了一个大约 1 分钟长的演示视频 - 但是，这段时间不足以进行适当的测试。免费提供包含更长视频的视频链接(或者如果您希望我用这个更新演示，请分享)。

main 函数将遍历视频元素上的 buffered 对象。它会将存在于 Canvas 上的所有部分呈现在以红色显示的视频正下方。

您可以单击(不要拖动)此查看器以将视频移动到不同的位置。

/// buffer viewer loop (updates about every 2nd frame)
function loop() {

    var b = vid.buffered,  /// get buffer object
        i = b.length,      /// counter for loop
        w = canvas.width,  /// cache canvas width and height
        h = canvas.height,
        vl = vid.duration, /// total video duration in seconds
        x1, x2;            /// buffer segment mark positions

    /// clear canvas with black
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, w, h);

    /// red color for loaded buffer(s)
    ctx.fillStyle = '#d00';

    /// iterate through buffers
    while (i--) {
        x1 = b.start(i) / vl * w;
        x2 = b.end(i) / vl * w;
        ctx.fillRect(x1, 0, x2 - x1, h);
    }

    /// draw info
    ctx.fillStyle = '#fff';

    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.fillText(vid.currentTime.toFixed(1), 4, 4);

    ctx.textAlign = 'right';
    ctx.fillText(vl.toFixed(1), w - 4, 4);

    /// draw cursor for position
    x1 = vid.currentTime / vl * w;

    ctx.beginPath();
    ctx.arc(x1, h * 0.5, 7, 0, 2 * Math.PI);
    ctx.fill();

    setTimeout(loop, 29);
}