You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
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
This discussion was converted from issue #1608 on April 20, 2024 13:42.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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
Beta Was this translation helpful? Give feedback.
All reactions