Plyr: Touch devices doesn't pause when tapping playing video

Created on 18 May 2018  路  15Comments  路  Source: sampotts/plyr

Expected behaviour

Pause the video on mobile when clicking on the viedeo

Actual behaviour

Cannot pause the video on mobile when clicking on the video

Environment

  • Browser: safari
  • Version: latest
  • Operating System:iOS
  • Version: latest

### Steps to reproduce
-

Most helpful comment

It shows the controls instead; which allows you to pause. This mimics most other video players behavior and makes the most sense.

Is there an event listener we can set to true when initializing the player so when tapping on the video, it pauses the video?

All 15 comments

Does it happen on https://plyr.io/?

@friday
yes, so if you open it on safari (i said chrome by accident, updated the issue) the video plays
then try to tap on the video again to stop it but it wont stop
you have to stop the video using the video controller at the bottom

I think that's how it's intended to work with touch-devices. Tapping to stop is problematic since tap means "show the controls" when autoHide is enabled.

Assigning Sam since it's his design.

@friday
oh I see, I hide the controllers via css so I couldn't stop the video on mobile by clicking on the video
when on desktop, you can click on the video and it pauses so I thought same thing should happen on mobile

Mouse and touch events are not 1:1. You can't hold/hover your mouse over the video with a touch device, so in order to show the controls when autoHide is enabled you need to reserve the tap event for that. It makes sense if you think about it.

Could possibly make this an option or "tap to pause" when both the video is playing and the controls showing. You should be able to add this event too, which I think is reasonable since you're doing custom stuff.

Edit: Seems this used to be the behavior before autoHide

The fact is that tapping is not an exclusive behaviour of mobile devices: I'm on a Desktop, but I have a touchscreen monitor, so every mouseclick for me works like tapping on Plyr.

@0cool-f
Edit: Seems like I read that too fast (if mouse clicks are treated as touch interactions). That could be a separate issue.

New issue opened: #1067

This should now be resolved in v3.4.0

@sampotts 馃憤 yeah, solved my mouseclick issue (#1067), mouse behaviour and touch events now act different, there's still a little problem just for touch: if the video is playing and I tap the video it will pause itself, but when this one is paused and I tap the video it will not come back to play, it just show me next frame and then return to pause immediately, instead if I hold tap for about 1sec it will come back to play normally...

@sampotts
"This should now be resolved in v3.4.0"
but tapping on the video still does not pause the video - may I know what changed?

It shows the controls instead; which allows you to pause. This mimics most other video players behavior and makes the most sense.

Yep, and the reason other players do it is because you have to touch it to get to settings/seek (no hover)

It shows the controls instead; which allows you to pause. This mimics most other video players behavior and makes the most sense.

Is there an event listener we can set to true when initializing the player so when tapping on the video, it pauses the video?

It shows the controls instead; which allows you to pause. This mimics most other video players behavior and makes the most sense.

Is there an event listener we can set to true when initializing the player so when tapping on the video, it pauses the video?

You could do onclick , or ontouch via javascript? @LittleHamster

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Antonio-Laguna picture Antonio-Laguna  路  3Comments

muuvmuuv picture muuvmuuv  路  3Comments

osamay picture osamay  路  4Comments

tomByrer picture tomByrer  路  3Comments

TheZoker picture TheZoker  路  4Comments