Youtube的HTML5视频播放器如何控制缓冲?

Kal*_*exx 47 youtube video html5

我正在观看youtube视频,我决定调查其视频播放器的某些部分.我注意到,与我见过的大多数HTML5视频不同,Youtube的视频播放器不会使用普通视频源,而是使用blob网址作为源.

以前我测试了HTML5视频,我发现服务器从一开始就开始流式传输整个视频,并在后台缓冲整个视频的剩余部分.这意味着如果您的视频为300兆,则将下载所有300兆.如果你寻求中间,它将从搜索位置一直开始下载到最后.

Youtube不会这样工作(至少在chrome中).相反,它设法控制缓冲,因此它只在暂停时缓冲一定量.它似乎只缓冲相关的部分,所以如果你跳过它将确保不缓冲不太可能被观看的部分.

在我试图研究它是如何工作的时候,我注意到视频src标签有一个值blob:http%3A//www.youtube.com/ee625eee-2802-49b2-a13f-eb374d551d54,它指向blob,然后导致我输入数组.使用这两个资源,我可以将mp4视频加载到blob中并将其显示在HTML5视频标记中.

然而,我现在坚持的是Youtube如何处理这些碎片.查看网络流量,它似乎发送请求,以http://r6---sn-p5q7ynee.c.youtube.com/videoplayback2.1mb的块返回二进制视频数据.值得注意的是,由于HTML5视频请求导致的大多数正常请求似乎在流式传输时收到了206响应代码,但是youtube的播放视频调用获得了200个响应代码.

我试图只尝试加载一系列字节(通过设置Rangehttp标头),但遗憾的是失败了(我假设因为视频中没有视频的元数据).

在这一点上,我一直在想弄清楚Youtube如何实现这一目标.我提出了几个想法,虽然我没有完全卖掉:

1)Youtube会在每次/videoplayback通话时发送自包含的视频和音频块.这似乎是上传方面相当沉重的负担,似乎很难将它们拼接在一起,使它看起来像是一个无缝的视频.此外,视频标签,似乎认为这是一个完整的视频,从通话判断$('video').duration$('video').currentTime,这使我相信,视频标签认为它是一个单一的视频文件.最后,vidoe src标签永远不会改变,这让我相信它正在使用单个blob而不是切换blob.

2)Youtube构造一个预先确定为完整视频数组大小的空blob,并在下载时更新blob.然后它将确保用户没有太接近最后下载的片段(以防止用户进入blob的未下载部分).我看到的问题是,我没有看到通过javascript动态更新blob的任何方法(尽管我可能只是在谷歌上搜索它)

3)Youtube下载元数据,然后通过在下载时附加视频片段来开始按顺序构建blob.我用这种方法看到的问题是我不明白它将如何处理后缓冲区域中的搜索.

也许我只是错过了一个在我面前的明显答案.任何人都有任何想法?


编辑:我只想到了第四个选项.另一个想法是,他们可能会使用文件API将二进制块写入文件并使用该文件流式传输.文件API似乎能够搜索特定位置,因此允许您使用空字节填充视频并在接收时填充它们.这肯定也适合视频搜索.

Got*_*ure 6

好的,您需要知道的几件事是 YouTube 是基于这个伟大的开源项目的。每个浏览器的行为都不同,如果您的浏览器支持 WEBM 等更密集的解码,它将使用它来节省 Google 的带宽。另外,如果您查看此演示, 那么您会发现一个部分,它将整个视频下载到一个称为“离线存储”的东西中。我知道 chrome 有它,其他一些浏览器也有,但在某些情况下,它们确实必须使用整个视频源而不是 blob。因此,该 blob 的流式传输取决于用户与视频的交互。是的,视频只是 1 个文件,他们有该视频的元数据,就像一个小数据库,告诉视频的时间以及可以划分块的点。

您可以通过阅读项目文档了解更多信息。我强烈建议您看一下演示。


小智 5

当您查看GoogleChrome的AppData时,在播放YouTube视频时,您会看到它在分段文件中缓冲.上传到youtube的视频是细分的,这就是为什么如果该时间范围超出当前细分,则无法在第一次单击条形图时完美确定时间范围.

段的数量取决于视频的长度,以及开始和停止播放视频的时间.

当您链接到视频的时间范围时,它将简单地跳过在该时间范围之前的段的缓冲.

不幸的是,我对视频播放的编码知之甚少,但我希望这能指出你正确的方向.

  • 有趣的是,我确实看到大量文件被添加到我的AppData\Local\Google\Chrome\User Data\Default\Cache目录中,并且从网络流量判断1.1MB文件是视频块.现在的问题仍然是他们如何将它们拼接在一起.谢谢 :) (2认同)