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

Do not let the user advance the video (onSeek)

Open Aluisio opened this issue 2 years ago • 0 comments

Hello! I needed to make a control of not letting the user advance the seconds of the video (only rewind), and I would like to share my experience so that we can discuss a better implementation in the lib. I did it as follows:

const videoRef = useRef(); let lastSecondPlayed = 0;

<ReactPlayer ref={videoRef} url={ANY_VIMEO_URL} controls width="100%" height="100%" className="react-player" progressInterval={10000} onProgress={({ playedSeconds, }) => { lastSecondPlayed = playedSeconds; }} onSeek={(seconds) => { if (seconds > lastSecondPlayed) { videoRef.current.seekTo(lastSecondPlayed, 'seconds'); } }} />

Problem: I would like to use the progressInterval property with the value 10000 because I use the onProgress event to send the progress of the user who is watching the video to the api every 10 seconds, and this way I can only update the value of the lastSecondPlayed variable every 10 seconds, as there is no method that I can capture the actual second that the user saw the video before the onSeek method was executed (videoRef.current.getCurrentTime() called inside the onSeek event already returns the updated value).

I thought of some solutions: First: An onBeforeSeek event could be created that would return playedSeconds and playedSecondsTo (where it is and where it will go) and so I could control whether to let the video advance or not.

Second: The onSeek event could return playedSeconds, and this way I wouldn't need to create the lastSecondPlayed variable and it would also solve the progressInterval problem, but the playedSeconds of the onSeek event must always be the last real second that the user saw the video (without respecting the value of progressInterval and before the onSeek event is executed)

Third: The lib itself could create a property canAdvanceSeek: boolean and make this control internally

Aluisio avatar Apr 05 '23 14:04 Aluisio