Question

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

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

Youtube不会以这种方式工作（至少在chrome中）。相反，它设法控制缓冲，因此它只在暂停时缓冲一定量。它似乎只是缓冲相关的部分，所以如果你跳过它将确保不缓冲不太可能被观看的部分。

在我尝试调查这是如何工作时，我注意到视频src标记的值为blob:http%3A//www.youtube.com/ee625eee-2802-49b2-a13f-eb374d551d54，它指向blobs，然后引导我typed arrays。使用这两个资源，我可以将mp4视频加载到blob中，并将其显示在HTML5视频标记中。

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

我试图只尝试加载一个字节范围（通过设置Range http标头），但遗憾的是失败了（我假设因为视频中没有视频的元数据）。

此时我一直在想弄清楚Youtube如何实现这一目标。我提出了几个想法，虽然没有一个我完全被卖掉了：

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

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

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

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

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

Answer 1

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

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

当您链接到视频的时间范围时，它将跳过缓冲在该时间范围之前的片段。

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

Answer 2

Youtube仅在支持Media Source Extensions的浏览器中使用此功能，因此由浏览器决定所有其余内容，因为此功能。

Answer 3

页面中有一个canvas元素，Maybe This Will Help http://html5doctor.com/video-canvas-magic/

我们知道视频是分段的，问题是如何将它们拼接在一起。我认为真正的视频元素不进行播放工作，它支持数据源，并将每个帧绘制到画布上元件。

var v = document.getElementById('v'); 
var canvas = document.getElementById('c');
v.addEventListener('play', function(){ 
   if(v.paused || v.ended) return false; 
   c.drawImage(v,0,0,w,h); 
   setTimeout(draw,20,v,c,w,h); 
},false);

Answer 4

好的，您需要知道的很少的事情是YouTube基于这个伟大的开源Project。对于每个浏览器，它的行为都不同，如果您的浏览器支持像WEBM这样的更密集的解码，它将使用它来节省Google的带宽。如果你看看这个Demo 然后你会找到一个部分，它将整个视频下载到一个名为＆＃34; offline storage＆＃34;的东西中。我知道chrome有它和其他一些浏览器并非在某些情况下它们都必须使用整个视频源而不是blob。因此blob是流式传输，具体取决于用户与视频的交互。是的，视频只是一个文件，他们有该视频的元数据，就像一个小数据库，告诉视频的时间和可以分割块的点。

您可以通过阅读Project的文档了解更多信息。我真的建议你看看演示。

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

4 个答案: