Seeking User | Issue with Seeking Events Looping in Vidstack Player

[MwSpaceLLC]

Hello,

I'm working with Vidstack Player in a React project and encountering a problem with the seeking events. Specifically, we are using onSeeked and onSeeking events, but we face an issue where setting a new time within these events causes them to loop, generating thousands of requests. This occurs when we try to restrict forward seeking beyond the user's maximum watched time.

Here's a snippet of our code:

// if (seeking && currentTime > videoTime) {
//     console.log('onSeeked', seeking, currentTime, videoTime);
//     player.current.currentTime = videoTime; // Reset currentTime to the max allowed time
// }

Could you provide any guidance on preventing this loop, or is there a better way to handle seeking restrictions in Vidstack Player? Any insights or links to relevant documentation would be greatly appreciated.

Thank you for your assistance.

[mihar-22]

Hey there! We don't have a clip/trim option at the moment but we most likely will. The issue with your code is that you're seeking to the same time over and over. Three things you can do:

1. Pause the video when you've reached the videoTime.
2. You're better off listening to onTimeUpdate and handling it there. That will also include just playing the video to that point without seeking. If this operation is only for seeking then what you have is fine.
3. Provide an onPlay callback that will seek back to the start of the video if currentTime > videoTime.

Hope that helps!

[MwSpaceLLC]

Thank you for the suggestion regarding the onPlay event. However, I'd like to add that in our implementation, the onTimeUpdate event is crucial for saving the user's video progress. When we use onPlay, the video starts and then gets repositioned to the specified time, which is not the desired behavior in our case.

Here's a snippet of our code for context:

    function onPlay(nativeEvent) {

        if (video.user_id && video.backspace) {
            axios.get(`/api/account/player/${video._id}/time/current/${video.user_id}`).then(({data}) => {
                player.current.currentTime = data?.currentTime; // Imposta il currentTime al valore desiderato
                console.log('setVideoTime', data?.currentTime)
            })
        }

    }

    function onTimeUpdate({currentTime}, nativeEvent) {

        // update user video time
        if (video.user_id && playing && !seeking) {

            // Verifica se sono passati cinque secondi o se c'è stato un salto nel video
            if (currentTime - lastApiCallTime >= 5) {

                const data = {currentTime, video_id: video._id, user_id: video.user_id};

                axios.post(`/api/account/player/${video._id}/time/update`, data).then(({data}) => {
                    console.log('timeupdate', data)
                })

                setLastApiCallTime(currentTime);
            }
        }
    }

This approach seems to cause the video to initially play and then jump back to the saved time, which might confuse the users. Is there a way to handle this more seamlessly, perhaps preventing the video from playing past the saved time before it even starts? Any further advice or guidance would be greatly appreciated.

we also tried nativeEvent.preventDefault(); but not blocking play.

[MwSpaceLLC]

Additionally, I'd like to report another issue we're encountering: when a user has finished watching the video and the time is set to the end of the video via an API, the player does not seem to accurately position the currentTime to the actual end of the video, but rather it is off by a few seconds. This behavior can be observed in the following code snippet:

function onCanPlay(detail, nativeEvent) {
    if (video.user_id) {
        nativeEvent.preventDefault();

        axios.get(`/api/account/player/${video._id}/time/current/${video.user_id}`).then(({data}) => {
            player.current.currentTime = data?.currentTime; // Setting currentTime to the desired value
            console.log('setVideoTime', player.current.currentTime);
        });
    }
}

This issue might cause confusion for users, as the video does not resume exactly from where it had ended. Any suggestions on how to resolve or improve this situation would be greatly appreciated.

In console log, player.current.currentTime parse at 0