YouTube/Facebook 如何使用 blob 显示视频？

Question

我想知道这些网站从其服务器获取 blob 格式视频的过程？

<video height="390" width="693" preload="auto" src="blob:https://www.facebook.com/34799f7c-34d4-48c7-976f-1e2ddba0728a"></video>

我希望在我的网站上实现相同的方法。

我可以使用 blob 获取视频。但是这个过程很慢，因为我必须先从服务器检索（下载）视频，然后创建 blob。

var xhr = new XMLHttpRequest();
xhr.open("GET", "video.mp4"); 
xhr.responseType = "blob";
xhr.onload = function() 
{
    var video = document.getElementById("videoId");
    video.src = URL.createObjectURL(xhr.response);
}
xhr.send();

如果视频时长为 10 分钟，则页面加载后大约需要 15 秒才能更新视频源。

但是，例如，当您在 YouTube 上观看视频时，它几乎会立即加载。他们如何使用 blob 如此快速地加载视频？

Answer 1

YouTube 使用 MediaSource 扩展程序对视频播放进行细粒度控制。但是，这可能比大多数用户需要的更复杂。播放 .mp4 文件的最简单方法是：

var video = document.getElementById("videoId");
video.src = "video.mp4";

这将只下载用户观看的内容，类似于 YouTube 的工作方式。