1

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>
SJ19
  • 1,933
  • 6
  • 35
  • 68

1 Answers1

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.

Chris
  • 6,331
  • 1
  • 21
  • 25
  • Thank you! I solved it using a third solution, which is disabling the controls and making my own controls for playing and pausing :) – SJ19 Oct 17 '20 at 14:47
  • @sj19 - do you have a codesanbox or jsfiddle of an example react-player with small custom controls? I can't believe the docs don't have an example, which makes it slightly difficult if your coming from react-hooks (react-player is not using hooks) – Clifford Fajardo Feb 01 '21 at 13:14