I am working on a video subscription site using Django and React. As we will have multiple people who want to make content for us, I would like to be able to track the time a user has spent in any video, then update the database by adding that time when the page is left. This is in order to know how much each video has contributed to our revenue. I am currently using React player to play videos, but I can easily transition to other type of player. Also, if anyone has a better way to track the time without using any player, I would appreciate any answer.

<ReactPlayer
            url={this.state.lectie.link}
            controls
            type="video/mp4"
          />

I am working on a video subscription site using Django and React. As we will have multiple people who want to make content for us, I would like to be able to track the time a user has spent in any video, then update the database by adding that time when the page is left. This is in order to know how much each video has contributed to our revenue. I am currently using React player to play videos, but I can easily transition to other type of player. Also, if anyone has a better way to track the time without using any player, I would appreciate any answer.

<ReactPlayer
            url={this.state.lectie.link}
            controls
            type="video/mp4"
          />

• javascript
• reactjs
• django
• react-player

• 1 I've never used that package. One way to approach it is to capture the events like onPlay and onPause and keep track of the time yourself and sync it later. I'm not sure if the html video element natively has better support for tracking view time. – t3dodson Commented Jul 14, 2021 at 8:59

1 Answer 1

By looking at react-player's documentation, it has a prop called onProgress which you can pass a callback to and it will give you the following format { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }. So based on this you could do something like this

function PlayerComponent() {
  const [played, setPlayed] = useState(0);

  // ...

  <ReactPlayer
   onProgress={(progress) => {
       setPlayed(progress.playedSeconds);
     }}
   />
}

and then when your ponent dismounts, you can send the value of the played variable to the API you want.