react-html5video icon indicating copy to clipboard operation
react-html5video copied to clipboard

Seek bar not precise

Open B-Stewart opened this issue 8 years ago • 3 comments

When you are choosing to seek or skip to a certain position of a video the bar does not always load to where your pointer is. If you seek to <50% the bar will load lower than where you click, if you seek to >50% then the bar will load higher than where you click (up to the point where it finishes the video when you wanted to go near the end). If you click at 50% it seems to be dead on accurate so I'm guessing it's a scaling issue of some sort. This is reproducible on your demo (http://mderrick.github.io/react-html5video/).

B-Stewart avatar Jun 24 '16 17:06 B-Stewart

Thanks for the issue. I am indeed aware of this problem, but it's just how range inputs work. In fact here is a link to the SO question I raised regarding it: https://stackoverflow.com/questions/33486311/custom-html5-range-input-and-handle-offset. If you yourself have a reasonable solution to this problem, I would love to get it fixed.

mderrick avatar Jun 25 '16 20:06 mderrick

I think the only way to really fix this is to get rid of the range input to achieve the progress bar. I guess you used the range input for accessibility reasons? (and because it makes sense). How complex would it be to use a simple div and keep all of this accessible? It seems like Youtube is using a div with custom JS for keyboard arrows support.

Grsmto avatar Jul 26 '16 18:07 Grsmto

Yes this would be the way to go. The range slider is a much simpler solution because it also has dragging for free which you'd also have to implement. I'd love to see this implemented as a third party repository acting as an alternative to the current seek bar component.

mderrick avatar Jul 27 '16 09:07 mderrick