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"
/>
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 component dismounts, you can send the value of the played
variable to the API you want.