vidstack
Setting the currentTime to the same as duration
Current Behavior:
I built a custom time slider using the API in svelte. However the issue can also be seen when using the <media-time-slider> component
When a video is paused, I can use the thumb of the range slider to change the time. When I drag the thumb to 100%, I set the current time to equal the duration. However, the current time ends up be a fraction of a section before the full time for some unknown reason.
This causes several problems, is that the ended event does not fire, but more importantly, is it can show an incorrect time in the <media-time> component
I have a video with a duration of 104.025396. When I move the time-slider to 100%, and set the current time to be 104.025396 (the duration), the current time actually ends up as 103.925396. This means <media-time> component will show a duration of 01:44 but 01:43 for the current time. The user would NOT understand what is happening leading to poor UX.
In the below video, I have 2 time sliders. The top one is the <media-time-slider> component and the bottom one is my custom 1. As you can see I slide it to the end, in the output you can see what is happening. You will see when I drag the bottom (custom) slider, the top one (<media-time-slider> component) moves too. You will also see that I move it to the absolute end or the slider but in console I see time change: time [103.925396] duration [104.025396]
https://github.com/vidstack/player/assets/494875/ac39c00c-3dc5-4f59-aeb2-ff296c7434a0
I have tried several things, such as using the remote to set the seek, directly setting the player.currentTime, setting the current time to a value above duration, setting it to 1ms before the end duration, but nothing works and it always ends up at 103.925396, resulting in <media-time> showing the wrong time
If I then press play, it plays for a fraction of a second, the current time updates to 01:44 (104.025396) and the video stops again, resulting in a weird flicker
Expected Behavior:
When I set the time to the end time of the video, it doesn't move to a time before that.
Steps To Reproduce:
Use a media-time-slider component. Drag it to the end and monitor the currentTime vs the duration. I would expect these to be the same
Environment:
- Framework: Component
- Meta Framework: Svelte/SvelteKit
- Node: 20.11.0
- Browser: Firefox@latest
I had a look at the vidstack code and I can see when someone sets the current time manually, it queues it and then when processed removes 0.1, which lines up with what I’m seeing.
Removing 0.1 is fine, however when not when setting it to the very end. If the duration is .05 of a second over a new number, removing .1 will take it below. For example, 13.05 become 12.95. This means the media-time component will show the end time as 12 seconds.
Thanks for the report! In my testing across the providers we support, seeking to the end of the video can be problematic with certain media and browsers. It can get stuck waiting for data (i.e., buffering). Also, when live streaming, trying to seek directly to the live edge can sometimes cause issues.
Subtracting 0.1 off any seeked time helps resolve any keyframe discovery issues and rounding errors. I don't think it makes sense for a user to take a specifically "paused" video and seek right to the end? If you're playing a video and then seek to the end it will still naturally end.
Regardless, I'll still use this issue as an opportunity to try and smooth out seeking expectations, especially with regards to seeking to the end.
While I agree that it is not the most common scenario to make scroll a paused video to the end, there are certainly people that will (as I have done before) and having the possibility that the current time not matching the end time is odd UX. Plus, I have added logic to show a restart button when the video ends. Right now, that doesn't happen because I can never actually seek to the end without then subsequently playing the video.
I do understand that subtracting 0.1 can help seeking issues, especially during live streaming but the way I see it is .. if it's NOT a live video and the current time has been updated to match exactly the duration then do not subtract by 0.1. If you are setting the current time == duration then there is no more media to play anyway and so there are no more to seek issues to contend with. With that, events fire accordingly, current time matches duration in the