After some time of inactivity my laptop screen will darken and then turn off, as specified by my power saving settings. However if a YouTube video is playing then this doesn't happen. So either youtube.com is preventing this or my OS disables this power save feature when a webpage is playing a video.
I'm making a web application exercise timer. As the user is exercising when using it, they don't touch the mouse or keyboard meaning that the energy save kicks in and turns off the display. From test usage I can say this is very annoying!
How can I disable this behaviour while a exercise timer is running? I suppose I could hack it with a hidden video playing in the background but I was hoping for a better solution.
This question is a duplicate of: Can I prevent phone from sleep on a webpage
However it's a bit out of date, there is now a Wake Lock API but it's still experimental: http://boiler23.github.io/screen-wake/
Ive decided to go with a library, this seems the most popular: https://github.com/richtr/NoSleep.js
Related
I'm building a website with HTML5 audio, including custom audio controls and visualization using JavaScript.
When opening the website in my mobile browser (I've only tested Android/Chrome, but I assume similar behavior on other systems), after a few seconds the screen will turn off and soon after the audio will stop playing.
Is there an official way in HTML oder JavaScript to tell the browser to keep the audio playing with screen turned off?
Side information: there is Screen Wake Lock API preventing the mobile screen from turning off. Since my website provides music, I want the phone to turn off the screen if desired, only keep playing the audio.
I added the mentioned Screen Wake Lock API on my homepage, activating it as soon as the user starts the music and the screen doesn't turn off by default anymore. However, if I now turn off the screen manually (Android/Chrome), the music will keep playing.
This solves the issue in the case we are fine with having the screen staying on by default, so for me this question is answered.
I built a fitness "progressive" web app that you can add to your phone home screen. It guides the user through a 7 minute workout.
Is there any way to keep the screen "awake" so the user doesn't have to keep coming back to the phone to turn it on? Another drawback to the screen sleeping is the javascript timer stops, ruining the workout timing.
https://www.w3.org/TR/wake-lock/
https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Wake_Lock_API
Basically, yes, there is such a thing as a website forcing the screen to stay awake, but it is non-standard currently. It may become standard but right now it seems to only work on FirefoxOS. This is however to be the intended way to achieve wake locking in javascript.
Another solution though that's more of a hack is doing something along the lines of playing a hidden video in the background since as far as i know most browsers stay awake if a video is playing.
I'm working on children's products and we have audio playback on click, mouseenter and focus for a lot of navigation and interactive elements for children who can't read.
But if a screen reader or other accessible tool is on this audio can be distracting and get in the way, overlap with the tool's audio and so on.
Is there any standard practice or method of getting around this?
I know I can't really detect if a user is using an accessibility tool but I don't really know what my options are.
You have to put a button on the top of the page to disable all sounds and keep the user choice in session.
The WCAG 2 requirement for self playing audio is that if it plays for more than 3 seconds, you must supply a control to pause/stop the audio.
https://www.w3.org/TR/WCAG20/#visual-audio-contrast
In addition, you should have a mechanism for choosing to not have any sound effects.
What's the best way to show an animation from after effects on a website onload?
It needs to play like a load screen in all major browsers and iOS devices.
What's the best way to show this?
I tried html5 and the auto play didn't work on iPad. I don't want to use flash. The animation is too complex for just JavaScript. Is it worth trying to make a high quality animated GIF?
Well, your main problem with virtually any onload video is going to be load and buffer time, especially on a mobile device. If the splash screen takes half a minute to load, the experience will be very subpar, and there's virtually nothing you can really do to reduce that load time short of making the video low quality (a large animated gif will have the same problem).
My recommendation would be to try coding the animation using pure HTML5 animation effects if possible. They will render faster, use only static images, javascript and CSS, and will be more widely compatible with modern desktop and mobile browsers.
Unfortunately, it is not possible to auto-play html5 video on an iOS device. At least as of iOS 5, Apple has disabled both auto-play and pre-loading, presumably to save bandwidth for users who may be on limited or expensive mobile data plans.
Unless you're willing to skip the video, the only workaround is to get the visitor to click or touch something on the page. Mobile Safari will allow you to play a video using Javascript methods (as opposed to the native player controls), but the first call to .play() has to come from a "click" or "touch" event handler.
You can limit this requirement to iPads and still allow desktop browsers to auto-play, but there doesn't appear to be any kind of reliable feature-detection method, so you have to parse the User Agent string (navigator.userAgent).
There isn't much documentation on the strange, non-standard things Mobile Safari does with video, but this article has some very good, detailed information and some code samples:
http://blog.millermedeiros.com/html5-video-issues-on-the-ipad-and-how-to-solve-them/
Edit: And then there's this elaborate and absurd workaround that Apple uses on its own site.
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
I have an html5 video app which consists of video + JS swipable playlist + other JS animated overlays.
In iOS, onload performance of the playlist swiping and overlay animation is fine. Once a video has played, even if it is stopped, the playlist swiping and overlay animation is very very slow. Some users think it is not responding at all.
In Chrome/desktop, everything is fine.
If I log status information, the logs look the same regardless of whether a video has played or not. I don't know where to begin to debug. It seems to be a memory issue (?), but not sure how or if it can be addressed.
Anyone have any thoughts?
Javascript in iOS (both safari and UIWebView) execution can be stopped (or killed could be more appropriate term) without throwing any errors if under heavy CPU load to save more power for background native tasks or special tasks like handling video - rendering video even if hardware (GPU) supported still requires more CPU power thus it gets higher priority then javascript and can lead to the javascript acting not as intended or expected - it can work sluggish or not at all in extreme cases.
The only thing I can come with is pausing the video on any user input in iOS - maybe it would help.
regards,
Tom