Problems with jPlayer on touch devices - Click event does not trigger

[Greg]

I am having issues with a video player I am building using the jPlayer plugin.  On touch devices, when I tap on the interface controls, I get no response.  I did some tracing and the touchstart and touchend events are fired with each tap, but click is not.  Does this issue sound familiar to anyone as to what might be going on?  Otherwise, I will have to add an event handler for touchstart followed by touchend to trigger a click, but I would prefer not to solve the issue by covering it up.

[Mark Panaghiston]

What touch device are you using?

jPlayer uses the jQuery.click() event handler method. Nothing special.

I have noticed on touch devices that you must touch without dragging at all to generate click events.

[Greg]

I've been testing on iPad and also Asus Transformer (Android platform) and neither work.  I've set up other players for iPad and Android and the touch controls worked fine, so I thought it might be something in the setup.  I removed as many things as I could without success.  I am using autohide, but removing that option didn't change anything.  I am also using SVGs for the player control displays, and I took those out too, as well as the touch events that add a colored shadow to the button on touchstart.  I thought it might be something related to the styles.  For example, for this player there are controls both top and bottom, so the jp-interface itself has no actual dimension, with the top and bottom controls being absolutely positioned and having their own dimension.  This is so the interface doesn't cover up the entire video element.  I was hoping someone else may have experienced the same type of problem with touch controls and new how to correct it.  Also, strangely enough, I do not have this problem in the standard browser of the Asus tablet, which happens to be Mozilla based.  

From what you wrote, this might actually be a jQuery problem?

[Mark Panaghiston]

Any chance that you have a layer over the GUI area that is see-through, but is capturing the clicks?

Often browsers behave differently to this sort of thing, which some ignoring clicks on layers that are transparent, while others do not care. Try adding in some temporary rules that change the background colour of layers that might fall into this category.

On the iPad, you can plug them into a mac and use safari to view loads of stuff going on in the iPad browser. I've only used it for console logs really, but it has a load of other stuff available for viewing just like any other modern browser dev tool. Look at the safari options on the ipad and go from there. BTW, dunno if it works o a PC with safari on it... I have a mac I could use and figured why try on my windows machine.

[Greg]

Any inspector would pick up that layer on selection.  I've been sending the event targets to the console, and they are all to the anchor element with the player element controls, the svg containing the control graphics within the anchor, or the svg child element.  I cannot inspect on latest IOS version now since I have a PC, where it does not work, but have gotten firebug lite bookmarklet up on my iPad for basic testing, particularly console readings.  I also have adb on my PC with full developer tools access to chrome on android tablet.  These elements capture touchstart and touchend, but no click.  At least for now, I have gone with triggering a click manually on a touchstart followed by a touchend.