I have created and validated an ePub 3 which I am currently testing. I am using a fixed layout..
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">portrait</meta>
<meta property="rendition:spread">none< /meta>
It works nicely, however multiple pages seems to load and run at once when testing in different readers. I'm using jQuery's document ready to kick things off and play audio, run animations, etc.
When testing in iBooks I open the book to page 1 which loads and begins to run, but then I start hearing audio from page 2.. so the document ready function has fired for page 2 (because it has been loaded) even though I am not viewing it yet. In Readium it seems load and run every single page...
Three questions:
Does anyone know why?
Is there a way to prevent an eReader from running or loading pages you are currently not viewing?
Is there a way to detect (with javascript) when a page is being viewed? (I have tried adding focus event listener to the window but it didn't work).
Document ready seems not to work in ePub. After testing a bit, I noticed that my javascript did not wait my document is ready to start its work. I tested on iPad 1 (iOS 5.1.1) with 3.1 iBooks version. The "solution" I have is to estimate the loading time of your HTML document by any tool which does this, then multiply it by 2 or 3 (because javascript on iOS device is clearly as slow) and use settimeout() function with the obtained time.
The problem is in Redium. you should manually set the settings to make it as two page.
into the Redium, go to settings then check the double pages
Related
i have to create a product presentation tool that runs offline on an ipad.
i have a program wirtten in c# to create a presentation and this program has an export function, this export function creates a whole little homepage (only html and javascript) with the product slider - everything works fine, also the online presentation is perfect.
but the capital problem is, how could i run this offline on the ipad?
what i already tried:
- put the scripts to dropbox and tried to start index.html on ipad (the local links doesnt work)
- i tried to chache the whole page, but that was too much for caching..
there is also one solution i would prefer -> phonegap, but there i see the problem with creating the app... the c# programm should prepare everything, so the clients should take this exported file/files or direcotry and but it anywhere and the ipad should run this presentation offline.
thanks guys
You can try to make a simple app with UIWebView inside and load your local resources into this UIWebView.
Here are some similar questions on how to make it:
First
Second
Third
The way your clients are able to add the presentation files might be using iTunes File Sharing. And you can get these files from Documents directory
Hope this will help.
I am using Howler.js on my PhoneGap application. Because my audio files are large (more than 10Mb) im an setting the buffer attribute to true (forcing HTML5 Audio).
var theSound = new Howl({
urls: ['assets/Sound.m4a'],
buffer: true,
sprite: {
scene0 : [ 1966000, 27000] }
When I test my application on the emulator and my iPad Mobile Safari everything works well. But when I run the application on the iPad as an app, the audio never starts. Using the web inspector I have noted that the audio file tries to load again and again like an not ending loop. You can see an attached screenshot of the resources tab on the web inspector both both the emulator and the iPad, running the same PhoneGap app.
Any idea on what could be the problem?
I've been looking into this for a while.
From what I've gathered, Howler defaults to Web Audio API, and this SO answer says you need a "user input event" to make it work on iOS, because by default it mutes everything. I even tried Howler's own interactive demo on my iPad 2 with iOS 5 (I still haven't updated) here and NONE OF THE SOUNDS WORK. My first link has a link to Apple's documentation, and I haven't tried it yet, but it looks like the convenience of Howler has to be replaced with a lower level implementation that takes about 5-10 lines with XMLHTTPRequest (see the Apple link), or another more versatile library. I'm still learning about what exactly I need, but I have a very similar problem I've been working on resolving today.
But then Howler falls back to HTML5 Audio. OK so I'm just googling that now, and this link comes up, and it's just reminding me of the pletora of compatibility considerations between OGG ACC MP3 etc on various browsers vs. browser layout engines vs. operating systems. So I'm left believing your file format M4A, related to MP3 as far as I can tell, isn't working in the target brower on the target iPad OS. I'm not familiar enough yet to give exact specifics but certainly since Howler doesn't work on my iPad that proves there's at least a problem with that.
The whole point I chose Howler to use was to abstract all the above away! I'm going to go look for another more comprehensive library now =D
the problem might be file size. IPad has a limited cache memory size and if you overflow it assets will not work. The only solution to this problem is smaller file size. Another possibility is html audio will not load or play except in a user event (touch). Web Audio will load but starts muted and only unmutes with a play call inside of a user event.
SoundJS is a library I help develop that handles as much of this stuff as possible. In particular I think you would find the Mobile Safe Approach useful. It is well tested on iOS and Android devices. Unfortunately we do not support sound sprites yet.
Hope that helps.
For my business I need to be able to show a potential client a website I generate with a program called Pano2VR, which is a virtual tour program. This program takes some panoramic photos linked with each other and can generate a virtual tour out of them (as example: www.casas-fotoart.de/virtualtours ). The output this App gives can be either HTML5, Flash or both (flash if available and html5 for mobile devices, for example).
I need to be able to show that on my iPad while offline. i haven't found any solution for that so I tried to build a easy App for that, which I thought it wouldn't be complicated.
I generated a html5-only virtual tour and I droped the output into the "Suporting Files" group on the Xcode project. I added a UIWebView and on viewDidLoad I set it so it loads the html file.
The files I'm droping are like these (these inside the ipad folder):
The html file loads into the webView, but it just displays "This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.", even though when loading these files from the net, it loads perfectly. I know this message comes from the html file.
Any idea on how to make it work will be much appreciated. Thanks in advance.
Your problem is this probably - XCode is mangling the JS files, I assume because it's trying to compile them
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 button becomes broken.
I've gone into Settings > Safari > Advanced > Website Data and, sure enough, the video is in the cache... So the problem seems to be that it is not being retrieved from the cache.
My HTML code snippet:
<html manifest="cache.manifest">
...
<video width="320" height="240" controls="controls">
<source src="videos/movie.mp4" type="video/mp4" />
</video>
My cache.manifest snippet:
CACHE MANIFEST
# Updated 2012-08-22 19:49:00
index.php
...
videos/movie.mp4
For good measure, my .htaccess snippet:
AddType text/cache-manifest .manifest
AddType video/mp4 .mp4
Does anyone have any ideas?
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.
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.
I'm making a website where a user can say which items he wants to cache. Based on this, a manifest file is generated. By doing this the user can still browse in the website when he is offline. This is all working fine in google chrome. But on iPad it's not working as it should.
Sometimes things get cached sometimes not, not even the pages i visited.
We have been testing with 2 iPads all morning, but we haven't been able to get the same result on both iPads. Even if we do exactly the same, we sometimes get different results.
So what we do:
turn WiFi on
browse to the website
make some settings so some pages/images/... are added to the manifest file
turn WiFi off
go back to safari refresh/browse to pages that should be cached.
Sometimes on one iPad (this is an iPad 1) it works exactly as it should, but sometimes it doesn't work at all.
On the other iPad (this is an iPad 2) it never works completely as it should. Just some random results.
It also looks like the results are different when we completely shutdown safari, and then clear the cache and then do the whole process of downloading and caching stuff...
Somebody can help me with this problem? It's a real pain in the ass at the moment... :(
Open web server (IIS)
Select website
Open MIME type
Add or edit to text/cache-manifest
Reset iis at command prompt iisreset
It works for me.
I've encountered some problems as well with ipad caching.
MIME type of the manifest file is not set right due to windows hosting. The standard MIME type on a windows server is "application/x-ms-manifest". This was created when the ClickOnce applications came to life. The MIME type that is necessary to work on safari is: "text/cache-manifest"
Cache size is too small on ipad (you should get a warning to enlarge it)
the Ipad needs time! I've noticed that the cache is not filled when you see all assets or when the website is "loaded". Give it twice the normal time to load before you place the website to your homescreen.
Cache of the cache :) The iPad only reloads the files when the modified date on the server is changed. So when you really want to test, clear all cache on the iPad, remove the link on the homescreen and upload all your files again.
Conclusion: Time consuming!
Hint: Turn on the debug console in safari on your desktop or iPad. It gives a fair idea if you did something wrong or if it is a cache problem on the iPad.
It looks like the problem didn't have anything to do with the application cache. It was somehow a problem with the cookies/the way i was dynamically building the manifest file.
I'd like to slightly echo Pieter-Paulus Vertongen, I had a similar experience with Windows hosting.
According to the debugging console in Safari, the mime type for the manifest file was being misread and nothing was being downloaded as a result.
I copied all of my files, including the .htaccess file, over to a linux server without changing any content within the files...and then the caching worked beautifully.
So yes, it's possible this may be an issue of where the files are hosted. Use the debugging console and Jonathan Stark's code to find out:
http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/