Embedded Html 5 Video Is Stored In The Cache But Is Not Displayed On Ipad 2

I am creating an offline webapp for the iPad 2, which includes video content. When the page first loads, the video displays fine. But when I reload the page, the video's play butto

Solution 1:

This unfortunately isn't an answer but after now 20 hours continuous searching and testing to resolve the exact same problem i can tell you where i am now.

This appears to be an ipad iOS specific problem where no matter what size the video / sound file is it will not draw on the cached files although they clearly are cached and on first load it plays the file OK.

I have tried making the smallest video possible. I have looked at wrapping in a native app but that's not an option for delivery reasons. I have tried forcing a reload of the video .src on page load using javascript. I have tried all possible variations of the manifest file. Looked at all the Apple developer docs i can stomach.

After reading hundreds of posts, that never actually complete, i think the answer, other than getting the client to buy Android tablets, is to use the local database to store the video in binary form to be retrieved when needed by the app. Unfortunately i am still searching for examples of this and as yet cant find any with any detail. Local saving of text / numerical data isn't a problem. I just dont know if its possible to store the raw file data and retrieve it in a local database.

Sorry its not what you were after but hope it helps point you in less directions.

An update but not much progress. I decided to use base64 ecoded mp4 and paste the text in a simple xml file. My app would read this xml video data and by using in the video tag SRC. This was about a 4MB string.

SRC="data:video/mp4;base64,AAAAA /...../ AA"

This worked fine in Chrome. When i used it on the Ipad the good points are that i didnt ever get the play button crossed out and it tried to play then flashed a message it could not complete this operation.

Solution 2:

I had a somewhat related issue with playing video on an iPad. This was in an HTML widget that will reside in an iBooks file. My problem was I couldn't get the videos to rewind, so when you went back to that screen the video was stuck at the end (or still playing if you went back fast enough.)

The workaround I came up with was to load a different video and then reload the video I wanted to play. It's ugly, but it works, and it may provide a workaround for your problem.

var sources = videoEl.getElementsByTagName('source');
sources[0].src = "assets/TeethMouth_Anim_Part3_03.mp4"; // Load some other video into the source, in my case, a video that I'm playing later in the presentation.
videoEl.load();
sources[0].src = "assets/TeethMouth_Anim_Part1_03.mp4"; // Then reload the video I want to play.
videoEl.load();

Although now I see that this thread is a year old so it's probably not an issue anymore. Still, thought I'd post it.