plyr
plyr copied to clipboard
ClickToPlay broken on mobile?
Expected behaviour
Clicking on the video on mobile should toggle play/pause the video (ideal) or show controls.
Actual behaviour
Clicking on the video on mobile should play/pause the video. Works on desktop chrome, not on safari on iOS, or chrome in "touch mode". Chrome in touch mode does show the controls, safari on iOS doesn't.
Steps to reproduce
Clicking the video (outside the play button). Doesn't start the video. On chrome in touch mode the controls show/hide, on safari in iOS they don't, the only way to pause the video is clicking where the play/pause button should be shown (bottom left corner). On iOS clicking starts to show the controls (animates them in), but then quickly hides them again.
Environment
Tested on latest Chrome on OSX, Safari on iOS 13.
Console errors (if any)
None
Link to where the bug is happening
https://plyr.io/ or the minimal video demo at https://codepen.io/pen?template=bKeqpr
This seems to be intended behaviour when looking at listeners.js line 427 ff.:
// Touch devices will just show controls (if hidden)
if (player.touch && player.config.hideControls) {
return;
}
Just created the following workaround, because I also want to pause the video for my loop-videos with no controls by clicking on them - even on mobile ;)
loopPlayers.forEach(player => {
player.on('click', event => {
if(player.touch) {
player.togglePlay()
}
});
});
Got the same bug, impossible to clicktoPlay (I've put it 'true'), and also click to Pause on screen on IOS if we don't touch the controls "play" button. I did the fix from @nepomuc , which work great, but this cancel the good behavior on controls too: If I let Nepomuc code like this, the play button on controls and play large button on center are not working anymore..
If this clicktoPlay bug on IOS is not fixed , How could I code this to continue to have the hability to use controls & play large in center, but also, to allow any touch on any place of the player (that is NOT the control or the play large) to toggle pause/play.
Anyway , that Would be good that this bug would be fixed. Play/pause on a touch, everywhere, is a basic behavior on most of players.
It remains the same in 2022. Did it stop because of COVID-19?
Same issue here, I'm surprised it hasn't been addressed. Tap anywhere on the video can't pause the video as speaone suggested, it's needed to toggle the control bar. BUT it could also bring a large pause button overlay in the center of the video, that would be much easier to tap than the tiny one in the control bar. That's a pretty common behavior in mobile video players.
I have same issue. Play/pause on mobile working very weird.. Turns on after first click but doesn't stop after second
https://github.com/sampotts/plyr/assets/496132/06800741-1e85-4ae7-9e77-cc0d4512409b