ReactJS Video player (react-player) - How to check if the video was (fully) played?

Question

I'm using ReactJS and I'm trying to display a video where the user is only allowed to continue after watching the entire video. I'm currently using a dependency called React-player, it has the option to check when it has ended, but then the user can just skip through the video.

Is there a way to check if the video was played for a certain duration? Or is it possible to disable forwarding?

This is my code currently:

    <ReactPlayer
        onEnded={() => setVideoEnded(true)}
        url={
            "https://...server.net/NodeUploadServer/public/" +
            course.video
        }
        width="100%"
        height="100%"
        controls={true}
    />

    <Button disabled={!videoEnded} >
      Go to test
    </Button>

Answer 1

Here are two possible solutions to your question:

Use a custom player UI

The first solution is to remove the default player controls which is rendering the timeline component. However, with this solution, you will need to create your custom UI.

Keep track of the played time

The react-native player does have an event to publish the elapsed time, but this isn't what you are looking for.

If you are using the HTML5 Video player, you could leverage the played property and verify if the video has been played a certain range.

If not, you will have to keep track of the time played using an interval or using the timeupdate event.