2011-09-29 46 views
4

我在HTML5中製作應用程序,在其中選擇視頻文件,然後應用程序使用HTML5 video標記和window.URL.createObjectURL()播放它。問題是,我要救這個視頻在localStorage的數據,並在用戶使用我的應用程序再次發揮它,但作爲Mozilla MDN states這個方法的結果:如何保存window.URL.createObjectURL()結果以供將來使用?

瀏覽器會自動釋放這些文檔時被卸載

那麼有可能做我想做的事嗎?或者在沒有window.URL.createObjectURL()的情況下做同樣的事情,但要做其他事情?

回答

4

我沒有使用createObjectURL(),但如果我理解正確,它實質上是對文件或內存中對象的臨時引用。如果您想保存實際的視頻,它將不會有用,因爲下次用戶訪問該應用程序時,該視頻本身將不再被該指針引用。

認爲您或許可以用data:這個URL代替URL,因爲這個URL實際上包含了文件中的全部數據。 This example演示使用FileReader來生成數據URL。我想你應該能夠做到這一點:

var reader = new FileReader(); 
reader.onload = function(e) { 
    var myDataUrl = e.target.result; 
    // do something with the URL in the DOM, 
    // then save it to local storage 
}; 
reader.readAsDataURL(file); 

更新:如果你想去高達1GB,爲您在您的評論請注意,你可能會得到更好的利用FileSystem API服務。這需要您獲取本地文件,將文件的副本保存到永久文件系統存儲,然後使用createObjectURL()獲取文件副本的URL。磁盤空間仍然存在問題 - 您只需將1GB的重複文件內容添加到用戶的文件系統中,但我認爲不可能在瀏覽器沙箱外持續引用文件。

+0

這與createObjectURL()不同,因爲createObjectURL()只鏈接到用戶計算機中的文件,而使用FileReader它將文件的所有數據放入內存中。這對於圖片非常有用,因爲它們並不重要,但我計劃用戶使用我的應用程序播放的視頻可能會達到1GB,並且您不希望所有這些內容在已經存在的情況下進入您的內存保存在你的機器上...... – Cokegod

+0

對,但我不認爲'createObjectURL()'提供了一個*持久*參考文件 - 這就是爲什麼當頁面被卸載時它被撤銷。允許持續引用文件 - 例如通過文件路徑 - 將是一個安全問題。這就是爲什麼我建議你需要保存整個事情。 – nrabinowitz

+0

您可以將無限數據寫入FileSystem API(並通過指定'window.PERSISTENT'來保持它的持久性)。 'window.requestFileSystem(window.TEMPORARY,10 * 1024 * 1024/* 10 MB * /,onInitFs,errorHandler)' [請參閱html5Rocks教程](http://www.html5rocks.com/en/) tutorials/file/filesystem /) 只需設置您希望使用的數據量。 –

相關問題