Home » Android » html – Can Android cache HTML5 video with cache manifest offline?

html – Can Android cache HTML5 video with cache manifest offline?

Posted by: admin May 14, 2020 Leave a comment

Questions:

I have example which is cached fine on chrome and displays video while offline.

When i try this example with android 3.2 and 4.x tablet, video will play only online, but not offline – although other elements like HTML file and background are present offline.

<!DOCTYPE html>
<html manifest="example.appcache">
    <head>
        <title>Hello Video!</title>
        <style>
        body{ background: url('background.jpg');}
        </style>
    </head>
    <body>
        <video width="855" height="480" controls="">
            <source src="railer.mp4"/>
        </video>
    </body>
</html>

And cache manifest example.appcache looks like:

CACHE MANIFEST

index.html
railer.mp4
background.jpg

NETWORK:
*

Has anybody managed to get offline video caching working for android browsers via cache-manifest?

How to&Answers:

I have tried to cache video (mp4 format) as well audio (mp3 format) files on Android 4.1.2 using its default browser as well as Chrome 27.0 but as you have mentioned in your post though it cached these elements it did not played the video and audio in the offline mode.

Answer:

The problem is the AppCache maximum size is not specified in the HTML5 offline spec. Various posts on the internet show different quota limits for the offline storage.

On StackOverflow also a lot of questions exist regarding the question of the cache’s max. filesize:

I think all that is safe to say is, that the maximum quota useable heavily depends on the browser and platform – and sometimes even on the free space available.

There’s a tool available http://demo.agektmr.com/storage/ (found in this article) that allows to check the maximum quota useable on your device. Maybe when you check it out you will find out that the filesize of the video you want to cache is too big for your device.

TL;DR The sources mentioned lead me to the following answer: It is (sometimes) possible to store a video up to a limited filesize, dependent on browser, platform and running environment. But there’s no guarantee that it will be cached properly (at least if it is not small enough).

Answer:

I’ve included a bare bones example (src) on how to cache an HTML5 video for use offline when using Application Cache or Service Worker.

To store the video for offline use

  1. fetch the video as an Array Buffer
  2. store the Array Buffer in IndexedDb
  3. convert the Array Buffer into a blob
  4. Assign the blob to the video’s source
  5. When offline, grab the video’s source from IndexedDB

You can grab the video’s source from IndexedDB when online as well, if you would like.