So I am trying to get a web app to cache a few videos so they play offline. The web app will be only for iPad.
My HTML is 4 simple videos, a stylesheet and a debug.js file.
<!DOCTYPE html>
<html manifest="cache.manifest" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css"/>
<script src="debug.js"></script>
<title>Mobile Cache Test</title>
</head>
<body>
<video width="640" height="480" controls="controls">
<source src="slide1.mp4" type="video/mp4" />
</video><br/>
<video width="640" height="480" controls="controls">
<source src="slide2.mp4" type="video/mp4" />
</video><br/>
<video width="640" height="480" controls="controls">
<source src="slide3.mp4" type="video/mp4" />
</video><br/>
<video width="640" height="480" controls="controls">
<source src="slide4.mp4" type="video/mp4" />
</video>
</body>
</html>
I've added the directive to my .htaccess file AddType text/cache-manifest .manifest
My cache.manifest file:
CACHE MANIFEST
# 2012-06-13:v1
slide1.mp4
slide2.mp4
slide3.mp4
slide4.mp4
style.css
debug.js
NETWORK:
*
Now my issue is when I open it the first time I see 4 videos and they can all play. It also asks if I will allow the site to increase the data limit to 25MB. I say yes. Through my debug.js I can see the videos downloading. I can also see on my iPad if I go to Settings > Safari > Advanced > Website Data
that the site is taking up 12.9MB.
So now I close safari and reopen and browse to the page. The 4 videos are now broken. They have the iPad play button with a slash through it and they won't play. Does anyone know what is happening here?