Seeking support on mobile

[phanan]

Currently it's apparent that you can't drag or click the progress bar to seek (fast-forward/rewind) on a mobile device – even the example of https://plyr.io/#audio doesn't work. Is it something you can support in a next release?

Thanks for the amazing lib, as always.

[sampotts]

Hey @phanan , this is a bug with the mobile browser implementation of the <input type="range"> element and not the fault of Plyr. It just uses regular elements after all. I can look at something to perhaps "fix" the browser bug but it might be better as a polyfill outside of Plyr itself. It's a shame they haven't implemented it properly given the pressure to use the correct elements for semantics. It's frustrating.

[sampotts]

I'll give this a test: https://github.com/dwyl/range-touch

[phanan]

May I suggest https://github.com/andreruffert/rangeslider.js? I'm using it in the same project with very good result.

[sampotts]

That looks to be more of a polyfill for older browsers whereas we really need a fix for just touch devices compatibility. It doesn't seem to be an issue on desktop browsers.

[phanan]

I guess you're right. A lightweight touch-only polyfill would fit better in this case. Thanks for looking into this!

On Sun, Mar 6, 2016 at 6:58 PM, Sam Potts notifications@github.com wrote:

That looks to be more of a polyfill for older browsers whereas we really need a fix for just touch devices compatibility. It doesn't seem to be an issue on desktop browsers.

— Reply to this email directly or view it on GitHub https://github.com/Selz/plyr/issues/178#issuecomment-192871099.

[nandastone]

@phanan @SamPotts

Tested https://github.com/dwyl/range-touch with no luck, there's currently some bugs in the library as of 1.0.0.

Have you guys made any progress on this?

[sampotts]

I'll take a look at this on the weekend along with the other bugs raised recently. Should be able to come up with something by setting the input value based on the offset of the touch location. Might make it a separate lib given that it's a browser bug.

[sampotts]

I just launched this: RangeTouch - I couldn't think of a better name (originally went with TouchRange but bought the wrong domain hah!) and given that the old lib above hasn't been touched for 2 years I thought it didn't matter too much.

Could someone give it a spin on Windows and Android and report back? I think Mobile Safari was the main issue but it would be good to get it tested on those and unfortunately I don't have test devices. I did try the Xamarin Android Player which seemed to work ok.

[sampotts]

Could you try adding RangeTouch to your setups and see how you go? You can also test on https://plyr.io 👍

[nandastone]

Bloody champion @SamPotts

Before adding the polyfill, plyr seek bar is working correctly on a Moto G 3 with Chrome 50.0.2661.89. Not working on iPhone 6s with iOS 9.3.

After adding the RangeTouch polyfill both devices are working like a charm. Thanks mate.

[sampotts]

Awesome - will close this one for now then 👍

[Lord-of-the-Galaxy]

Unfortunately, RangeTouch doesn't seem to be working for whatever reason (on my Android tablet). Am I doing something wrong?

<script src="https://cdn.plyr.io/3.3.21/plyr.js" crossorigin="anonymous"></script>
<script src="https://cdn.rangetouch.com/1.0.5/rangetouch.js" async crossorigin="anonymous"></script>
<script>
plyr.setup("#player");
window.rangetouch.set("thumbWidth", 15)
</script>

Is that ^ not enough to get the job done, do I need to add some other custom code?

I am also including the stylesheet:

<link rel="stylesheet" href="https://cdn.plyr.io/3.3.21/plyr.css">

[nicmare]

can confirm this does not work at all for me too. using iOS 12 on an iPhone 7, i can not really touch and drag the time range slider. i included RangeTouch as described on project page. so atm when i try to drag the range slider, i can make one single step of about 20 px and has to repeat theses steps to skip thru the video.

[jamesoflol]

I know this issue is old as hell, but I want to pipe up to say that I've also been having the same seek issue on the latest version, but it's very sporadic. Could it also be related to the dual touch/click events?

[okhick]

Has anyone tried either rangeslider.js or the rangeslider-pure? I would really love to use this player but it's a shame it (by no fault of it's own) doesn't work on touch devices.

[sampotts]

@okhick Have a read up ☝️You can just include the rangetouch script to fix the issues with touch devices and <input type="range">. It's not an issue exclusive to this player.

[okhick]

It seems like people are having issues with it? If you say it still work though I'll give it a shot!

[sampotts]

You can try it out here: https://plyr.io