是否可以預加載和緩存視頻文件而不將它們添加到DOM？

Question

我正在製作一個遊戲，涉及根據您獲得的結果觸發30個小視頻文件之一。由於視頻需要在用戶互動後立即播放，理想情況下，我希望將視頻預加載並準備就緒。

我已經添加了PreloadJS，排隊了我需要的所有資產。

查看巡視器中的網絡選項卡，我可以看到在加載屏幕上傳輸的所有20MB視頻。

然而，當談到時間來播放剪輯，它似乎是重新下載它們，而不是從內存中打他們......

我認爲，一旦文件被下載的，他們會僅僅停留在瀏覽器緩存中，並且一旦我嘗試加載具有相同src的文件，它會將其從所下載的資產池中拉出來，但這似乎不是這種情況...

任何想法如何可以將下載的文件保存在內存中而無需在頁面中添加30個視頻播放器？

謝謝！

Ger

Answer 1

您可以嘗試使用Blob和Object-URL將整個文件加載到內存中。這樣，未連接的視頻元素可以通過對象URL直接播放。

如果這是一個關於系統資源的好策略，那當然是您需要自己決定的事情。

• 通過XHR負荷blob
• 創建對象網址：var url = (URL || webkitURL).createObjectURL(blob);

視頻現在是在內存中，所以當你需要發揮它，將其設置爲源視頻元素和你應準備好：

var video = document.createElement("video"); 
video.oncanplay = ...; // attach to DOM, invoke play() etc. 
video.src = url;  // set the object URL 

在頁面的生命週期中，對象URL保留在內存中。如果需要，您可以通過這種方式手動撤銷它：

(URL || webkitURL).revokeObjectURL(url);