Plyr: YouTube seeking with with seek tooltip and custom controls

[jamesrockett]

Expected behaviour

When I hover over the timeline on a YouTube video, I see the time code pop up in a tooltip. If I click on that spot in the timeline, the video should seek to the time code being displayed in the tooltip.

Actual behaviour

The time code displayed in the seek tooltip is not the same one that the video actually seeks to. It is inconsistent and off by approximately 15-20 seconds every time.

Environment

• Browser: Google Chrome
• Version: 66.0.3359.139
• Operating System: Windows 10 Pro
• Version: 1709

Steps to reproduce

• Create a default, new Plyr instance with custom controls (HTML from the example in controls.md) using this video: https://www.youtube.com/watch?v=FbfffBa9cFw (any video should show it but a longer one makes it more obvious)
• Hover over the video's timeline and you should see a 'seek' tooltip showing the time code of that position on the timeline
• If you click, the video will go to a different position than what was shown in the tooltip
• If you click and drag, you will see that the tooltip time code does not match the current time

Hopefully this can be reproduced, I've noticed it on multiple machines. Thank you for your hard work, this is a great library!

[friday]

I'm not getting this with the plyr demo (https://plyr.io/#youtube) with Chrome 66 on a Mac. Are you getting the issue on the demo?

[friday]

Correction: It's happening on the demo as well.

[jamesrockett]

It might be happening but you can't tell because the "current time" block isn't visible.

If you use the custom HTML controls option (https://github.com/sampotts/plyr/blob/master/controls.md), which has the current time visible by default, its more obvious

[friday]

You can click the time (after pressing play or seeking) in order to show the current time instead of the remaining time. Anyway, you're right, and It's happening on the demo too. My head was just too deep into another task in order to test this properly.

Thanks 👍

[jamesrockett]

Wow, that's cool, I had no idea! Thanks for your help

[friday]

I think it's a rounding error. The diff gets bigger the further to the right you click, and it's happening for html5 and vimeo too.

[jamesrockett]

That makes sense, I first started noticing it on really long videos (1hr+)

[sampotts]

The cause of this is the <input type="range"> and my calculation of the value for the tooltip. The issue is that the handle never overlaps the end of the track on the input so you need to know the width of the handle itself and account for a varying amount of that as you get closer to the extremities. Unfortunately you can't determine the width of the handle with JavaScript as it's in the shadow DOM. I wonder if it's possible to do by creating an offscreen <input type="range"> that has width: 0 then calculate the rendered width. I'll take another look. Someone else raised a similar bug.

[friday]

Fixed in v3.3.8