Youtube的HTML5视频播放器如何控制缓冲？ [英] How does Youtube's HTML5 video player control buffering?
问题描述
我正在观看youtube视频，我决定调查其视频播放器的某些部分。我注意到，与我见过的大多数HTML5视频不同，Youtube的视频播放器不会使用普通视频源，而是使用blob网址作为源。
I was watching a youtube video and I decided to investigate some parts of its video player. I noticed that unlike most HTML5 video I have seen, Youtube's video player does not do a normal video source and instead utilizes a blob url as the source.
之前我测试了HTML5视频，我发现服务器从一开始就开始流式传输整个视频，并在后台缓冲整个视频的剩余部分。这意味着如果您的视频为300兆，则将下载所有300兆。如果你寻求中间，它将从搜索位置开始一直下载到最后。
Previously I have tested HTML5 videos and I found that the server starts streaming the whole video from the start and buffers in the background the complete rest of the video. This means that if your video is 300 megs, all 300 megs will be downloaded. If you seek to the middle, it will start downloading from the seek position all the way to the end.
Youtube不能这样工作（至少在chrome中）。相反，它设法控制缓冲，因此它只在暂停时缓冲一定量。它似乎只缓冲相关的部分，所以如果你跳过它，将确保不缓冲不太可能被观看的部分。
Youtube does not work this way (at least in chrome). Instead it manages to control buffering so it only buffers a certain amount while paused. It also seems to only buffer the relevant pieces, so if you skip around it will make sure not to buffer pieces that are unlikely to be watched.
在我试图调查这是如何工作的，我注意到视频src标签的值为 blob：http％3A // www.youtube.com / ee625eee-2802-49b2-a13f-eb374d551d54 ，它指向我 blobs ，然后让我键入的数组。使用这两个资源，我可以将mp4视频加载到blob中并将其显示在HTML5视频标签中。
In my attempts to investigate how this worked, I noticed the video src tag has a value of blob:http%3A//www.youtube.com/ee625eee-2802-49b2-a13f-eb374d551d54, which pointed me to blobs, which then led me to typed arrays. Using those two resources I am able to load a mp4 video into a blob and display it in a HTML5 video tag.
然而，我现在坚持的是Youtube处理件。查看网络流量，它似乎将请求发送到 http://r6---sn-p5q7ynee.c.youtube.com/videoplayback ，它返回二进制视频数据大块的1.1mb。值得注意的是，由于HTML5视频请求导致的大多数正常请求似乎在流式传输时收到了206响应代码，但是youtube的播放视频通话请求返回200.
However, what I am now stuck on is how Youtube deals with the pieces. Looking at the network traffic it appears to sends requests to http://r6---sn-p5q7ynee.c.youtube.com/videoplayback which returns binary video data back in chunks of 1.1mb. It also seems worth noting that most normal requests due to HTML5 video requests seem to receive a 206 response code back while it streams, yet youtube's playvideo calls get a 200 back.
我试图只尝试加载一系列字节（通过设置 Range http标头），但遗憾的是失败了（我假设因为视频没有元数据）随视频而来）。
I tried to attempt to only load a range of bytes (via setting the Range http header) which unfortunately failed (I'm assuming because there was no meta-data for the video coming with the video).
此时我一直在弄清楚Youtube是如何完成这个的。我提出了几个想法，虽然没有一个我完全卖掉：
At this point I'm stuck on figuring out how Youtube accomplishes this. I came up with several ideas though none of which I am completely sold on:
1）Youtube发送自包含的视频和音频块，每个 / videoplayback 致电。这似乎是上传方面相当沉重的负担，似乎很难将它们拼接在一起，使它看起来像是一个无缝的视频。此外，视频标签似乎认为它是一个完整的视频，从调用 $（'视频'）。持续时间和 $（'视频'）来判断.currentTime ，这让我相信视频标签认为它是一个单一的视频文件。最后，vidoe src标签永远不会改变，这让我相信它正在使用单个blob而不是切换blob。
1) Youtube is sending down self contained video and audio chunks with each /videoplayback call. This seems like a pretty heavy burden on the upload side and it seems like it would be difficult to stitch these together to make it appear like it's one seemless video. Also, the video tag seems to think it's one full video, judging from calling $('video').duration and $('video').currentTime, which leads me to believe that the video tag thinks it's a single video file. Finally, the vidoe src tag never changes which makes me believe it is working with a singular blob and not switching out blobs.
2）Youtube构造一个预先确定大小的空blob到完整的视频阵列并在下载时更新blob。然后它将确保用户没有太接近最后下载的片段（以防止用户进入blob的未下载部分）。我看到这个问题，我没有看到通过javascript动态更新blob的任何方法（虽然我可能只是在谷歌上搜索它）
2) Youtube constructs an empty blob pre-sized to the full video array and updates the blob with pieces as it downloads it. It would then make sure the user has not gotten too close to the last downloaded piece (to prevent the user from entering an undownloaded section of the blob). The problem that I see with this that I don't see any way to dynamically update a blob through javascript (although maybe I'm just having trouble googling for it)
3）Youtube下载元数据，然后通过在下载时附加视频片段来开始按顺序构建blob。我用这种方法看到的问题是我不明白它将如何处理后缓冲区域中的搜索。
3) Youtube downloads the meta data and then starts constructing the blob in order by appending the video pieces as it downloads them. The problem I see with this method is I don't understand how it would handle seeks in post-buffered territory.
也许我只是错过了一个明显的答案是正确的在我面前。任何人都有任何想法吗？
Maybe I"m just missing an obvious answer that's right in front of me. Anyone have any ideas?
编辑：我只想到了第四个选项。另一个想法是他们可能会使用该文件用于将二进制块写入文件并使用该文件流式传输的API。文件API似乎能够搜索特定位置，因此允许您使用空字节填充视频并在接收时将其填入这肯定也适用于视频搜索。
edit: I just thought of a fourth option. Another idea is they might use the file API to write the binary chunks to a file and use that file to stream off of. The file API seems to have the ability to seek to specific positions, therefore allowing you to fill a video with empty bytes and fill them in as they are received. This would definitely accommodate video seeking as well.
推荐答案
当您在播放YouTube视频时查看GoogleChrome的AppData时，您将看到它在分段文件中缓冲。上传到youtube的视频是分段的，这就是为什么如果该时间帧在当前段之外，您无法在第一次单击该栏时精确确定时间范围。
When you look at the AppData of GoogleChrome, while playing a youtube video, you will see that it buffers in segmented files. The videos uploaded to youtube are segmented, which is why you can't perfectly pinpoint a timeframe in the first click on the bar if that timeframe is outside of the current segment.
段的数量取决于视频的长度，以及开始和停止播放视频的时间。
The amount of segments depends on the length of the video, and the time from which you start and stop playing back the video.
当您链接到视频的时间范围时，它将跳过对该时间段之前的片段的缓冲。
When you are linked to a timeframe of a video, it will simply skip the buffering of the segments that come before that timeframe.
不幸的是我不喜欢我不太了解视频播放的编码，但我希望这能指出你正确的方向。
Unfortunately I don't know much about the coding for video playback, but I hope this points you in the right direction.
这篇关于Youtube的HTML5视频播放器如何控制缓冲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
