phhu / videojs-abloop

A video.js plugin for looping of a section of video, with GUI and API controls
https://unpkg.com/videojs-abloop/sample/basic.html
MIT License
41 stars 12 forks source link

Click does not work on apple touch devices #11

Open nimoatwoodway opened 4 years ago

nimoatwoodway commented 4 years ago

Thanks for the module!

Unfortunately the module does not work on Apple touch devices like the iPad.

When I touch the start or end button element, those clicks do not get triggered.

Replacing:

//create the button
  var b = player.controlBar.addChild('Button');
  if (spec.leftclick) {
    b.on('click', clickFunction(spec.leftclick));
}

with:

//create the button
  var b = player.controlBar.addChild('Button');
  if (spec.leftclick) {
    b.on('click', clickFunction(spec.leftclick));
    b.on('touchstart', clickFunction(spec.leftclick));
}

Basically inserting b.on('touchstart', clickFunction(spec.leftclick)); in line 686 fixes it for me at moment.

Don't know why the click is not triggered. Probably something else is going on and the end of the click is never reached on touch devices.

phhu commented 4 years ago

Thanks. I'll try to find an ipad to test on and then look to update the code so that it works.

phhu commented 4 years ago

I've tested on an ipad and it does work with just the click event for me. It needs a fairly firm finger press though I think.... Could you confirm which browser you're using?

nimoatwoodway commented 4 years ago

Thanks for you reply!

I've tested it on various Apple touch devices like iPad 4rd gen. with iOS 11, iPad Air 3rd gen. iOS 13.7, iPhone 11 Pro with iOS 14.2, iPad Pro 4th gen. with iOS 14.2. Everywhere with the native safari browser. On iOS there is only one browser engine available and the version is the same as the os version.

I used your demo page to test: https://unpkg.com/videojs-abloop@1.2.0/sample/basic.html

If I touch 5 to 10 times, sometimes it works but very randomly. I think the problem is in the handling of click events on touch devices. There is probably some delay between touch start and touch end and in between there seems something to happen in your script and then something loosing focus. Make this any sense to you?

I've created other components for the player and there I can just use the click event.

The adjustment I made works for me at moment. But maybe you find a better solution. Kind regards!

ThisIsJustARandomGuy commented 6 months ago

I just ran into the same issue on both, iPads and Android devices. I can confirm that the workaround still works.

BonerFide commented 3 months ago

I've had the problem on any iOS device I've tried in both Chrome and Safari. The work around of just pressing it alot / fast isn't great because half the time doing so will accidentally navigate away or bring up a text selection prompt etc and then you have to try all over again.