Javascript 視頻 blob 和漸進式下載

Question

嘗試將我的視頻流 Web 應用程序從使用帶有 URL 的經典<video src="http://myserver/video.mp4">切換到blob，以避免在頁面上使用簡單的 Ctrl+s 進行完整下載。

使用 XMLHttpRequest 似乎必須允許從遠程視頻文件創建 blob。

問題是 XMLHttpRequest 下載整個文件，不能用於漸進式下載使用。

以下代碼是從遠程文件加載 blob 的最簡單示例。

var r = new XMLHttpRequest();
r.onload = function() { // Triggered only when all video is downloaded
    video.prop("src", URL.createObjectURL(r.response));
};

r.open("GET", "http://myserver/video.mp4");
r.responseType = "blob";
r.send();

由於該應用程序用於視頻流，因此此方法不可用（除非我們希望用戶等待 X 分鍾才能下載整個文件，這根本不是流式傳輸）。

有沒有辦法將 blob 與漸進式下載結合起來？

Answer 1

當只使用 src="foo.mp4" 方法時，漸進式下載應該是瀏覽器中的默認行為。 但是，播放體驗取決於文件的實際格式。

“普通” MP4 文件不是為流式傳輸而設計的。 它們的結構使得開始播放所需的數據可以在文件的開頭和結尾之間拆分。 因此，播放器可能需要緩沖整個內容以獲取開始播放所需的數據。

您可以嘗試使用MP4Box 之類的工具將普通 MP4 轉換為碎片 MP4，指定“-frag”選項。 這會重新排列文件中的數據，以便所有初始化數據都在前面，而文件的其余部分則被分成塊。

一個更復雜的選擇是使用像 MPEG-DASH 這樣的東西。 通過利用 MP4Box 和dash.js ，您可以設置一個完全成熟的自適應流媒體播放器。