How can i store a 50MB video in HTML5's app cache?

Question

I'm developing an iOS offline app, and i'm trying to store a 50MB video for offline viewing. However after properly adding the video's url in my manifest.appcache, I got a console Error saying that the appcache limit exceeded the allowed size. Therefore, breaks my whole page; not one resource is loaded after.

As soon as I unlink the video from the appcache, everything works fine.

Is there a way i can circumvent this behavior ? Or, is there a way i can store a 50MB video on an IOS5+ iPad for offline view ?

Spermogonium

Answer 1

You have to ask the user to increase the limit in the iOS settings. Check out the financial times web app and see their approach.

http://apps.ft.com/ftwebapp/

It's not very elegant to get the user to do it manually, but since there's no API, there's no real alternative (except PhoneGap, etc.).

Stalagmite

app-cache limit cannot be increased even by the users. the financial times web app uses both app-cache and sqlite databse. the prompt we get is to increase limit for sqlite database but not app-cache – Filler

Ah, okay. I wasn't aware that it made the distinction, but that's good to know. – Stalagmite

Perhaps you could store your resources in the SQLite database, then load insert them into the page using the Data URI Scheme? – Bigg

That's pretty much what JSNinja's accepted answer is suggesting. – Stalagmite

Answer 2

There is probably no way to store your 50MB video. The current limit on iOS seems to be 5mb.

According to this answer to a similar question it's possible to raise it with some trickery, but that's probably not an option for your video.

Maybe you can include a (really) low res version of your video, maybe even in a smaller size for offline viewing.

Harbird

Answer 3

Depending on your browser requirements you may find IndexDB as a possible solution to store files for offline access. IndexDB was designed to store larger amounts of data than localstorage.

Demo: Storing Images and files in IndexDB

Rem