HTML5: Fetching videos (etc.) and storing them in Localstorage to play them later offline.

We write a lot of mobile apps and web apps; they both serve their purpose. Usually mobile apps need to also work offline and sync to the server later while web apps have usually an online requirement; aka they won’t work when you have no internet.

A client recently asked to build a web application which could fully work offline. Meaning that all the assets, including quite heavy videos, need to be loaded the first time the app loads and after that should be available to the user even though there is bad or no internet. The logic should be on the client side and the data should be synced when the browser detects internet again.

For the data side of things, we decided to use PouchDB, but for the video side of things I had to make a little demonstration if it was even possible to get this working on modern browsers.

I know it’s theoretically possible to fetch videos and then store them in HTML5 Localstorage and then play them. I did not know it was that easy (using a few external libraries). I combined a few examples and libraries from the web, namely this and LargeLocalStorage and created a working version using Google I/O 2014 MP4 videos.

See the code here.

Tested on Safari desktop, Chrome desktop, Android browser.

Be the first to leave a comment. Don’t be shy.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>