如何在HTML5的应用程序缓存中存储50MB的视频？

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 ?

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

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.

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