javascripthtmlhtml5-videohtml5-appcacheoffline-web-app

Chrome on Android is caching my video listed in manifest, but can't play it offline

I've created an offline web app which shows in remote chrome debugging console as correctly caching all the files and it shows that it is correctly offline capable. The video, listed in the manifest shows as downloaded into the cache but when i turn on airplane mode and try to play, it shows an empty video.

How do I get a video to play offline?

Cache Manifest

CACHE MANIFEST

CACHE:
main.js
video.mp4

HTML link to manifest

<html manifest="cache.manifest">

Is there a way to do this?

Solution

  • For some reason, the only mobile browser that will play cached videos is Firefox on Android. However, there is a solution (For Safari iOS8+, Chrome, Firefox - I haven't tested IE) - they will play a video blob in an objectURL even offline!

    What you do is this:

    1. Create an indexedDB
    2. Look for the stored video(s) in the db request = transaction.objectStore( "myobjectstorename" ).get( savedId )
    3. Check the return, if there, move to step 5, otherwise step 4 if ( !event.target.result ) downloadVideo()
    4. Download the video by running an XMLHttpRequest GET request and set the response type videoRequest.responseType = "blob";
    5. When it's downloaded, retrieve it from the database (step 2 above) and put it into the document:

    CODE To Put in page as object url:

    var URL = window.URL || window.webkitURL;

//Make into a data URL
var videoURL = URL.createObjectURL( videoFile) ;

//Set video src to ObjectURL
document.getElementById( id ).setAttribute( "src", videoURL );

    Modified the code from here:

    http://www.misfitgeek.com/html5-off-line-storing-and-retrieving-videos-with-indexeddb/