iOS - html5 - slowness in responsivity - javascript

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

Related

Disable power saving screen dimming / turning off on a web page?

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

Is it currently possible to have full screen (autoplay) video backgrounds on Mobile?

I'm currently working on something that uses a livestream from Ustream as a fixed background. At the moment, it only works on desktop, and I personally think that it wouldn't be the best idea to do this for mobile because of performance and so on (not to mention, I would hate for my mobile data to be chowed down by a video I cannot control). I'm simply curious if it is possible at the moment.
I tried it, just for fun, but realized that it doesn't autoplay and if I do initiate it by hitting play, a media player opens up with the stream in it - at least on iOS.
Just got me wondering if this was possible. I mean, facebook and instagram do it without opening up a media player, so I'm sure it is, but I'm assuming it's not as straightforward as I would want it to be.
Curious to hear your thoughts!
It is possible, but I guess more likely it depends on the device and the browser what it using, I tried now with this url: https://www.nationalgeographic.com/magazine/2017/09/holland-agriculture-sustainable-farming/ on my S9+ with the Samsung browser and it works for me if I ask the desktop version of the website. However I suggest to forget the background videos or the users will hate you when your app/site will consume all of their mobile data. And I don't want to mention the lower end devices. Those may not support or if support it will have a bad experience to view a background video.
For background video: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
Normally a real stream doesn't have too much difference compared to a static video if we just strictly viewing the background video/stream part.
It is possible, there is a good article on it here.
As the article describes...
By default, it can only autoplay when the video is muted. But for
webkit/iOs you also need a second attribute; playsinline. This
attribute makes it so that it, well, plays inline (and doesn’t
automatically jump to fullscreen video)
More information from google and webkit

HTML5 <video> Tag Performance

I have a <video> element at the top of my page playing an animation in the background (very similar to the one found on the Google Hangouts page). On most computers, the video plays smoothly and it seems fine, but on older hardware there is a lot of lag and the browser slows down quite a lot.
Is there anyway to detect the performance of the video playback? I'd like to either replace the video with a static image or pause the video if performance is an issue.
Use the video metrics if available in your browser. Here's an example using webkit prefixed DroppedFrameCount.
http://git.chromium.org/gitweb/?p=chromium.git;a=blob;f=chrome/test/data/media/html/media_stat_perf.html
See also: http://wiki.whatwg.org/wiki/Video_Metrics for the Moz prefix.
You could use Get the timestamp of loaded page to determine how fast the user loads the page, then if their bandwidth is below a specified threshold, supply an image rather than the variable.

Best way to show .mov on a website as load screen

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

PhoneGap: different behavior Simulator vs. Device

Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.
Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...

Categories

Resources