HTML5视频缓冲属性功能 [英] HTML5 Video buffered attribute features

问题描述

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

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

1. 假设视频开始播放。它自行持续到1:45（偶尔也许会拖延，等待更多数据），之后我突然跳到32:45。现在过了一段时间，如果我跳回到1:27（在最初加载和播放的时间范围内，在我跳转之前），它会立即开始播放，因为之前已经加载过吗？或者是因为我跳了一跳，那部分输了，将不得不再次提取？无论哪种方式，所有这些情况的行为都是一致的吗？




2. 假设我做了5或6次这样的跳转，每次等待几秒钟的某些数据到在跳转后加载。这是否意味着缓冲对象将存储所有这些时间范围？或者可能会有人迷路？它是一种堆栈类型的东西，由于更多的范围由于进一步的跳跃而加载更多的范围会导致更早的范围被弹出？




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

W3C规范对此并不十分清楚，我也无法找到适合测试的大型（比如说一个多小时）的远程视频资源。

解决方案

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

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

真正知道的唯一方法就是看浏览器具有或正在加载的内容。

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

在线缓冲器查看器

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

（缓冲区似乎也受到关键帧的限制，所以可以解码n-该缓冲区中的帧。这意味着缓冲区可以在实际位置之前开始加载数据。）

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

主要功能将遍历<$视频元素上的c $ c>缓冲对象。它会将显示在画布正下方的所有部分呈现为红色。

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

  ///缓冲区查看器循环（每2帧更新一次）
函数循环（）{
 
 var b = vid.buffered，///获取缓冲区对象
i = b.length，///循环计数器
w = canvas.width，///缓存画布宽度和height 
h = canvas.height，
 vl = vid.duration，///总视频时长（秒）
 x1，x2; ///缓冲段标记位置
 
 ///用黑色清除画布
 ctx.fillStyle ='＃000'; 
 ctx.fillRect（0，0，w，h）; 
 
 ///加载缓冲区的红色颜色
 ctx.fillStyle ='＃d00'; 
 
 ///遍历缓冲区
 while（i--）{
 x1 = b.start（i）/ vl * w; 
 x2 = b.end（i）/ vl * w; 
 ctx.fillRect（x1，0，x2  -  x1，h）; 
} 
 
 ///绘制信息
 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）; 
 
 ///为位置
绘制光标x1 = vid.currentTime / vl * w; 
 
 ctx.beginPath（）; 
 ctx.arc（x1，h * 0.5,7,0,2 * Math.PI）; 
 ctx.fill（）; 
 
 setTimeout（loop，29）; 
} 
  

I am designing a custom HTML5 video player. Thus, it will have its own custom slider to mimic the video progress, so I need to understand the entire buffering shebang of a HTML5 video.

I came across this article: Video Buffering. It says that the buffered object consists of several time ranges in linear order of start time. But I couldn't find out the following:

1. Say the video starts. It continues upto 1:45 on its own (occasionally stalling perhaps, waiting for further data), after which I suddenly jump to 32:45. Now after some time, if I jump back to 1:27 (within the time range initially loaded and played through, before I made the jump), will it start playing immediately as it was already loaded before? Or is it that since I made a jump, that portion is lost and will have to be fetched again? Either way, is the behavior consistent for all such scenarios?

2. Say I make 5 or 6 such jumps, each time waiting for a few seconds for some data to load after the jump. Does that mean the buffered object will have all those time ranges stored? Or might some get lost? Is it a stack kind of thing, where the earlier ranges will get popped off as more ranges get loaded due to further jumps?

3. Will checking whether the buffered object has one time range starting at 0 (forget live streaming) and ending at the video duration length ensure that the entire video resource has been loaded fully? If not, is there some way to know that the entire video has been downloaded, and any portion is seekable, from which video can play continuously upto end without a moment's delay?

The W3C specs are not very clear on this, and I also can't find a suitably large (say more than an hour) remote video resource to test.

解决方案

How video is buffered is browser implementation dependent and therefor may vary from browser to browser.

Various browsers can use different factors to determine to keep or to discard a part of the buffer. Old segments, disk space, memory and performance are typical factors.

The only way to really know is to "see" what the browser has or is loading.

For this I made a buffer-viewer which shows which part is in the buffer. The viewer will show current and all parts of the entire buffer:

ONLINE BUFFER VIEWER

For example - in Chrome I played a few seconds then I skipped to about 30 seconds and you can see that it starts to load another part starting from that position.

(The buffer also seem to be bounded to key-frames so it is possible to decode the n-frames in that buffer. This means the buffer can start to load data a little before the actual position).

I supplied a demo video about 1 minute long - however this is not long enough to do proper testing. Free free to supply video links that contain longer video (or please share if you want me to update the demo with this).

The main function will iterate through the buffered object on the video element. It will render all parts that exists to the canvas right below the video showing in red.

You can click (bit not drag) on this viewer to move the video to different positions.

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

这篇关于HTML5视频缓冲属性功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！