How to save the window.URL.createObjectURL() result for future use?

Question

I'm making an application in HTML5 where you choose a video file, and then the application plays it with the HTML5 video tag and the window.URL.createObjectURL(). The problem is that I want to save the data about this video in localStorage and play it again when the user uses my application, but as Mozilla MDN states about the results of this method:

Browsers will release these automatically when the document is unloaded

So is it possible to do what I'm trying to do? Or do the same thing without the window.URL.createObjectURL() but with something else?

Footstalk

Answer 1

I haven't used createObjectURL(), but if I understand correctly, it's essentially a temporary reference to a file or an in-memory object. If you want to save the actual video, it won't be useful, because the video itself will no longer be referenced by this pointer the next time the user visits the application.

I think you might be able to do this with a data: URL instead, as that URL actually includes the full data from the file. This example demonstrates using a FileReader to generate a data URL. I think you should be able to do this:

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);

Update: If you want to go up to 1GB, as you note in your comment, you'd probably be better served by the FileSystem API. This would require you to get the local file, save a copy of the file to persistent filesystem storage, and then use createObjectURL() to get a URL for the file copy. You still have a problem with disk space - you just added 1GB of duplicative file content to the user's filesystem - but I don't think it's possible to keep a persistent reference to a file outside of the browser sandbox otherwise.

Selfwill

This is different from the createObjectURL() because the createObjectURL() only links to the file in the user's machine, while with the FileReader it puts all the data of the file in memory. This works great with pictures because they don't weigh a lot, but the videos I'm planning users to play with my application can get to even 1GB, and you don't want all of this to enter your memory when it is already saved on your machine... – Footstalk

Right, but I don't think that createObjectURL() provides a persistent reference to that file - that's why it gets revoked when the page is unloaded. Allowing a persistent reference to a file - e.g. through a file path - would be a security concern. That's why I'm suggesting that you need to save the whole thing. – Selfwill

You'll be able to write unlimited data to the FileSystem API (and keep it persistent by specifying window.PERSISTENT). window.requestFileSystem(window.TEMPORARY, 10*1024*1024 /*10 MB*/, onInitFs, errorHandler) See the html5Rocks tutorial here Just set how much data you wish to use. – Creosote

@Selfwill I have a question here: #67015938 – Keely