plyr icon indicating copy to clipboard operation
plyr copied to clipboard

ClickToPlay broken on mobile?

Open PanMan opened this issue 5 years ago • 5 comments

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

PanMan avatar Apr 14 '20 09:04 PanMan

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()
    }
  });
});

nepomuc avatar Apr 21 '20 17:04 nepomuc

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.

spreaone avatar Dec 20 '21 14:12 spreaone

It remains the same in 2022. Did it stop because of COVID-19?

wonjangcloud9 avatar Feb 25 '22 05:02 wonjangcloud9

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.

mikaelcolboc avatar Mar 09 '22 03:03 mikaelcolboc

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

umkasanki avatar Mar 21 '24 16:03 umkasanki