Plyr: clickToPlay broken on touch devices

[friday]

Expected behaviour

Tapping a paused or stopped video should start playing it when clickToPlay is enabled.

Actual behaviour

On touch devices it does play initially when tapping, but after it's been paused and you tap it only plays briefly than pauses again. It seems like the touchend event is getting in the way. If you never release it works.

Probably related to the #968 fix?

Environment

Chrome 68 (Android or Desktop with webtools touch-emulation)

Link to where the bug is happening

https://plyr.io/

[sampotts]

Damn it - that'd be my change. Fix one thing, break another 😂

[ghost]

@sampotts
yes, I have the same issue, it is broken on the latest release
any timeline for fixing it? thanks

[jremi]

Same issue here.... I might need to roll back to a different version. What is the last version where this issue was not happening?

[jremi]

I ended up for now downgrading back to v3.3.23. Because it allows the control to fadeup when you tap the viewer. In the newer version it wont toggle play/pause on tap.

[jamesoflol]

The issue is that video play() is bound to both click and touchstart (listeners.js:375). Naturally, the video starts playing on touchstart, and then a couple hundred milliseconds later the click event fires and pauses it.

So obviously we don't want both, but can someone with more experience please enlighten me to why we might want to involve the touchstart event at all? It's the equiv of firing on mousedown. Click is so nice and universal. Obviously click has a delay because it fires on mouseup.. but I consider this to be minor. touchstart also has a host of other issues. Primarily that someone who tries to scroll the page by swiping on the video itself will cause it to start playing (well, it would if the bug didn't cause it to immediately pause again afterwards! :p). Swiping over video is a pretty likely scenario on mobile of course, because video takes up most of the page.

So, obvious solution (and I have tested this) is to simply remove touchstart as an event trigger for play().

A side effect of fixing this, however, is that "First touch on touch devices will just show controls" (listeners.js:383) is no longer true. But was it ever true/working?? The reason for this appears to be two-fold. One, is that toggleControls() is fired by the touchstart event at line 291, and as such the controls are always showing again by the time our click event is fired. The fix here would seemingly be to also remove touchstart as an event trigger for this function. But I tried that, and found that there appears to be a race condition whereby which the container() elements.container listener fires immediately before the media() elements.container listener. To try to reorder those would put me way out of my depth with this codebase.

I'm putting in a PR to simply drop touchstart as an event trigger for the media play() event, as it's currently breaking things pretty badly.

[sampotts]

This should be resolved in v3.4.4. Cheers all 👍

[nolyboms]

I am on iOS14 and when Vimeo-video starts to play the controls fade down and tapping/toiuching screen doesn't bring it back. The stay hidden until clip ends.