HTML5视频缓冲属性功能

Question

我正在设计一个自定义HTML5视频播放器.因此,它将有自己的自定义滑块来模仿视频进度,所以我需要了解HTML5视频的整个缓冲shebang .

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

1. 说视频开始了.它自己一直持续到1:45(偶尔也会停滞,等待进一步的数据),之后我突然跳到32:45.现在过了一段时间,如果我跳回到1:27(在最初加载和播放的时间范围内,在我跳跃之前),它会立即开始播放,因为之前已经加载了吗？或者是因为我跳了一下,那部分会丢失并且必须再次取出？无论哪种方式,所有这些情况的行为是否一致？

2. 假设我做了5或6次这样的跳转,每次等待几秒钟以便在跳转后加载一些数据.这是否意味着该buffered对象将存储所有这些时间范围？或者有些人会迷路？它是一种堆栈类型的东西,因为更多的范围由于进一步的跳跃而加载,早期的范围会弹出吗？

3. 将检查buffered对象是否具有从0开始的一个时间范围(忘记直播流)并以视频持续时间长度结束,以确保整个视频资源已完全加载？如果没有,是否有某种方式可以知道整个视频已被下载,并且任何部分都是可搜索的,视频可以连续播放而不会有片刻的延迟？

W3C规范在这方面不是很清楚,我也找不到一个适当大的(比如一个多小时)远程视频资源来测试.

Answer 1

如何缓冲视频是依赖于浏览器的实现,因此浏览器之间可能会有所不同.

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

真正了解的唯一方法是"查看"浏览器具有或正在加载的内容.

为此,我制作了一个缓冲区查看器,显示缓冲区中的哪个部分.查看器将显示整个缓冲区的当前和所有部分:

在线缓冲查看器

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

(缓冲区似乎也与关键帧有关,因此可以对该缓冲区中的n帧进行解码.这意味着缓冲区可以在实际位置之前开始加载数据).

我提供了大约1分钟的演示视频 - 但这不足以进行正确的测试.免费提供包含更长视频的视频链接(如果您希望我用此更新演示,请分享).

主函数将遍历buffered视频元素上的对象.它将呈现画布正下方所有存在的部分显示为红色.

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

/// 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);
}

Answer 2

根据

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
• https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
• https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges.start

该buffered属性包含有关所有当前缓冲时间范围的信息.根据我的理解,如果缓冲部分丢失,它将从对象中删除(万一发生).

特别是最后一个链接似乎对理解这个问题非常有用(因为它提供了代码示例),但请记住这些是mozilla文档,并且支持在其他浏览器中可能会有所不同.

回答你的问题

说视频开始了.它自己一直持续到1:45(偶尔也会停滞,等待进一步的数据),之后我突然跳到32:45.现在过了一段时间,如果我跳回到1:27(在最初加载和播放的时间范围内,在我跳跃之前),它会立即开始播放,因为之前已经加载了吗？

它应该在跳回时立即播放,除非该部分的缓冲区被卸载.我认为假设缓冲区或缓冲区范围在某个时刻卸载(如果整个缓冲区大小超过某个卷)是非常合理的.

假设我做了5或6次这样的跳转,每次等待几秒钟以便在跳转后加载一些数据.这是否意味着缓冲对象将存储所有这些时间范围？

是的,所有缓冲的范围都应该通过属性可读.

将检查缓冲对象是否具有从0开始的一个时间范围(忘记直播流)并以视频持续时间长度结束以确保整个视频资源已完全加载？

是的,这是最后一个链接中的代码示例.显然,这是一种确定整个视频是否已加载的适用方法.

if (buf.start(0) == 0 && buf.end(0) == v.duration)