We're currently developing an HTML 5 app for the iPad and looking for a method to prevent the screen from going to standby/sleep. I understand this is possible with a native iOS app but what about an HTML5-based web application?
Thank you for any suggestions and answers.
This is the complete answer to my question. I had originally marked @Colin Williams' answer as the correct answer, as it helped me get to the complete solution. A community member, @Slipp D. Thompson edited my question, after about 2.5 years of me having asked it, and told me I was abusing SO's Q & A format. He also told me to separately post this as the answer. So here's the complete answer that solved my problem:
@Colin Williams, thank you! Your answer and the article you linked out to gave me a lead to try something with CSS.
So, I was using translate3d before. It produced unwanted results. Basically, it would chop off and NOT RENDER elements that were offscreen, until I interacted with them. So, basically, in landscape orientation, half of my site that was offscreen was not being shown. This is a iPad web app, owing to which I was in a fix.
Applying translate3d to relatively positioned elements solved the problem for those elements, but other elements stopped rendering, once offscreen. The elements that I couldn't interact with (artwork) would never render again, unless I reloaded the page.
The complete solution:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
Now, although this might not be the most "efficient" solution, it was the only one that works. Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch. Unless a translate3d is applied to all other elements that might go offscreen owing to that scroll, those elements will be chopped off after scrolling.
So, thanks again, and hope this helps some other lost soul. This surely helped me big time!
Are you serving the video with the correct MIME type? The excellent Video On The Web article by Dive Into HTML 5 covers everything you need to know about serving Video. Way down the bottom of the article (past all the encoding help) covers issues with iPhones and iPads as well as the need for the correct MIME type. It's well worth the full read.
EDIT
To work with iOS the Accept-Ranges: bytes HTTP response header must be included, see: Safari Web Content Guide - Configuring Your Server
How about do it with CSS to do the trick.
Maybe you know about a company called vdopia that distribute video ad on mobile.
http://mobile.vdopia.com/index.php?page=mobilewebsolutions
They claim to developed what so called vdo video format, that actually just to do a css sprite running on that :D
I mean you could have your "video" as a framed image, then attach html5 audio tag on there.
I would like to know your response
Set UIRequiredDeviceCapabilities to require front-facing-camera. I don't think they are going to cut down on features. There isn't any other way, it seems.
Nope, you can't do this with a plain website/web app.
One option could be to create a native app containing simply a UIWebView. The native app would contain code to load your web app into the webview and disable the idle timer. (It's the idle timer that puts the iPad to sleep.)