Major mobile bugs calling play inside iFrame on Android and iOS (Wordpress, Theme, Ajax)

[Daniel Shepherd]

Hi,

We've got some major bugs calling the player in mobile devices and I cannot for the life of me figure out whats going wrong. We actually moved from using an audio.js player to jplayer, because of almost the same bugs as we thought it would be a more stable platform but now I've finished the player its happening again!

All along I've been testing the player on its own at http://themixtapesite.com/jplaylister/play.php - we're using jPlaylister version of jPlayer although nothing seems to specifically apply to that. In that page with the player loaded on its own it worked PERFECTLY everywhere I tested it, which was every single active browser on Mac, Windows and Linux including all versions of IE down to 8 and all mobile devices iOS, Android, Windows Phone and Blackberry 10. I was over the moon we'd got such a solid player.

Then came the time to incorporate into the site and again all desktop browsers work fine, but the mobile issues come back. On Android in some cases none of the buttons work at all, in other cases it skips double tracks, won't play some, hangs, etc. iOS works slightly better but again erratic and unpredictable behaviour.

You can visit our site at http://themixtapesite.com/#/transitions and see the player at the bottom of the ajax loaded portfolio post. Now because we use an Ajax loading theme it makes much more sense to load the player via an iframe and loading up new JS files inside of the ajax load is troublesome at times, plus there is a large amount of php coding in the header of the player which would be difficult to incorporate into the portfolio using Wordpress - so it seems to make more sense to use it in the iframe…unless of course someone tells me that is exactly where the erratic behaviour comes from.

For testing purposes I also embedded it on page, to rule out the ajax call.

http://themixtapesite.com/player-test/

I also made a brand new clean install of the theme with no plugins at all to rule out any plugins we have running or modifications and while it *very slightly* better it still has the same bugs with double skipping tracks, getting stuck and general navigation bugs, sometimes you have to skip forward and back a couple of times to initiate this but it does happen.

http://clean.seiceed.com - you can click on a portfolio ajax post and a standard page post here from the navigation menu to compare to the main site.

One thing to note, you need to clear cache after loading each version. I found on iOS and Android that when you load up with the most bugs, it will continue to do this on every version. I thought id got to the bottom of it on iOS until i cleared the cache and the player worked perfectly then on the clean site above. 

As I said, iOS is better, but still prone to slipping up - also you need to empty cache between testing as for some reason it caches the broken player problems and that'll then happen on every player…

If anyone can look at error logs in Android or iOS better than me and see if they see anything as I'm just stabbing in the dark now…

[Daniel Shepherd]

Right to be honest, I think I've simple narrowed this down to Android being the issue here - there were two in the original post however here is a basic question.

Why does this player work ok in Chrome on Android when you load this link…

http://themixtapesite.com/jplaylister/play.php

But the same player embedded in an iframe on our website doesn't work properly at all (none of the nav buttons do anything, randomly clicking on tracks will get one to start but you can't stop it etc)

http://themixtapesite.com/#/transitions

They work fine on all desktops and they work in iOS, but not in Android.

Further to that, in the default Android browser (on 4.2.2) there are some glitches even with the raw player loaded from the .php link, it sometimes double skips tracks, or gets stuck on a track, occasionally a few button presses will fix it but other times you have to reload the page. Behaviour seems erratic, but compared to the problem above, liveable.

Mark, what are your results with the links above in Android? What are you results with Android full stop (Id noticed the double track skipping even happens on demos if you play around enough) I don't understand how the player can work when loaded direct and break in the iframe. Further more I've made a fresh install of Wordpress with that theme and put the player just on a page and it loads and works in the iframe on Android! Would this indicated some kind of JS conflict, if so where? Because I have no idea how to get a debug log of this from Android, never mind how to fix it. I think any input could help other users trying to target Android customers which in my experience is a problem as its a nightmare to get things to work consistently for!

Please let me know how they work for you Mark... 

[Mark Panaghiston]

It is a little late in my day to start digging around... But I did anywayz...

I took a look on Firefox and iOS, but did encounter a few problems due to it trying to get me to sign up or try out the trials or whatnot. Maybe I was too impatient.

You mention testing on these mobile devices... I know on the iPad, you can plug it into your Mac and then use Safari (with developer enabled in options) to view the iPads console and web tools. Chrome on Android has something similar, but I admit that I gave up last time I tried to set it up. I should revisit that again some time. Maybe try pluggin your Android device in your PC/Mac and it will ask you?!? I have a Nexus 7.

As for the iFrame problems... It is possible that your page it rather busy for a mobile device to cope with. It could be that the CPU simply can't cope with all that is going on.

Other suggestions... for you to look for... Are when you create the iframe on the page, make sure that it is visible while loading in. This is a guess, but if you were to be hiding it suring the loading process and then display it when loaded, then that could cause problems on Android and iOS. I know iOS did not like you hiding the media element.

Maybe if you post (or email me) some temporary test account details, then I can investigate further.

[Daniel Shepherd]

Hi Mark,

Yeah, i've got the iOS debugger working, also works on the iOS simulator really well, doesn't flag up any errors in the console though. However, I think I need to clarify my second post, there were two problems, the first was with the type of signed URL we were using. Ignoring that issues and just testing the raw player, it seems to be ok in iOS, no problems now.

Android is where the issues lie. Again, I think my second post is more concise about the issues.

http://themixtapesite.com/jplaylister/play.php

Works fine, but

http://themixtapesite.com/#/transitions

Doesn't' at all. I don't think its a power issue as it works fine on iPhone 5 and I'm running on a Galaxy S3 not a really old device plus it does the same in Android emulator too. I just don't understand why it works ok everywhere apart from on Android and why theres only a difference on Android between the non iframe version and the iframe one.

The second issue I have is general little glitches on Android. Load the http://themixtapesite.com/jplaylister/play.php link in your Nexus 7 Mark in the DEFAULT browser (not Chrome) and skip tracks for a bit, you'll see at some point it'll skip two tracks in the playlist. If you try to go back to the track it skipped you'll notice it'll either jump it again or it'll lock up the player totally. Ive only ever found this happens in Android and to be fair, it doesn't seem to happen in Chrome on Android. Maybe its something in the playlister, i'm not sure - but its secondary to the issue above, id be happy if the iFrame player worked like that at the minute!

[Daniel Shepherd]

Some updates in testing Mark, i used Adobe Inside Edge to link up Android to Chrome for bug testing (I advise you grab it for your Nexus 7 actually, its free and useful!) I still can't get to the bottom of why it works in one version of the theme and not another… but how bizarre i this, turn the S3 to landscape mode and suddenly the buttons on the player work!! Ive never seen such a weird problem ever!

But still, please load the standard play.php in your Nexus 7 and skip forwards through the tracks for a few minutes and see if you get the double track skipping issue I've found on android devices (remember to test in default android browser and not Chrome, majority of users on the default browser) please let me know if you get this skipping and track starting bugs like I have on multiple Android devices (S2, S3 and android SDK emulator)

 

[Mark Panaghiston]

I feel like a freaking noob now, but how the hell do you get the default Android browser on the Nexus 7?
It comes with Chrome as the default. I have installed Firefox and Opera browsers and played with them before.

I did look around and it appears I need to root the nexus 7, then install some AOSP Browser. - I might have the letters incorrect there as I was looking last night. I generally prefer not to root my devices if I do not have to.

[Daniel Shepherd]

Arghh thats so annoying that a few devices don't come with the default browser, but then everything pre v4 of android you can;t have Chrome! I read the other day that 45% of Android users are on version 3 or older still, nightmare!

I highly recommend rooting for a test device though Mark on another note, I bought a Samsung S3 which couldn't make calls for really cheap on ebay just for website testing. I rooted it and I have the latest Samsung rom and also the latest stock Android 4.2.2 Jellybean (which Samsung haven't released yet) as a dual boot. Its quite handy to be able to use all the browsers. Its odd because the stock 4.2.2 comes with just "browser" as its called. I'm sure you could install the APK for that on the Nexus, let me have a look for you…

[Daniel Shepherd]

Yeah it does seem you have to have root access, really weird - I recommend doing it though, all it does it allow you to give apps root permission if you want (like you can with OSX or Linux) then its in the Google Play store to install. Odd its not there by default though, even comes in the Android SDK Emulator too.

[Daniel Shepherd]

Well I found an answer to the player not working at all for me…there was an overlapping div!! grrr. It only affected Android for some reason. I eventually found a way to do USB debugging via Chrome, not using Adobe Edge Inspect and it was MUCH better, I could finally select elements by choosing the "Select element" option and pressing on the screen and it showed me the element, which finally showed me the overlapping divs, so thankfully thats gone.

So for me, the player works pretty much ok in Chrome on Android (my problem with Chrome is our whole website is so massively jerky and very hard to navigate, a common problem with Chrome apparently…works fine on Firefox, but new Android handsets don't support flash and as we're not willing to encode everything to ogg just for Firefox on Android it doesn't work there)

Default browser is smoother than Chrome, but as I say, some bugs with jPlayer. Skips two tracks in a playlist, gets stuck if you try and skip back to play a track, once that happens it sometimes hangs completely and won't do anything until you reload the page. Its erratic behaviour and whilst the same 3-4 bugs reoccur they don't always happen at exactly the same time - well worth you getting the browser for to see as if you can figure out those things as far as I can see jPlayer will be perfect across all browsers on all devices and the default browser on Android is really highly used still, will be a while before everyone is moved over to Chrome.

[Daniel Shepherd]

You had a chance to get the default browsing running Mark?

[Daniel Shepherd]

Mark,

Perhaps some of the issues with Android browsers are related to this - http://jplayer.org/latest/demo-01-android/ - i'm on 4.2.2 now but despite Google updating the stock browser heavily in Jellybean it obviously still does things different to Chrome, hence the little bugs.

I presume this fix isn't included in jPlayer 2.4 as standard?

On Thursday, 30 May 2013 19:56:35 UTC+1, Mark Panaghiston wrote:

[Mark Panaghiston]

Nope, not got time to spend on Android specific stuff right now.

And no, that fix is not and (very probably) never will be in jPlayer. It is just too much of a frig and would screw up future android that do work. Well, make thm very clunky when they need not be.

Bit rushed right now and there is only so much we can do with browsers that do not follow the spec.

I would like to spend days looking into it, but that does not pay my bills.

[Daniel Shepherd]

Yeah I get where you're coming from - its just a shame that the most used browser in Android has so many little glitches.