Video-React: How to detect when the event when user played or paused the video?

Question

I am trying to execute some logic whenever the user plays/pauses a video that is implemented using Video-React:

<Player
  ref={(player) => {
    this.player = player;
  }}
  src={videoURL}
>
  <BigPlayButton position="center" />
  <ControlBar autoHide={false} className="my-class"></ControlBar>
</Player>;

So the user can play/pause the video in three ways:

1. Using the BigPlayButton he can play the video:
   
2. Using the play/pause button in the control bar:
   
3. Clicking on the video itself will play/pause it.

So, I need to detect whenever any of those three events happen.

For the first event, "Using the BigPlayButton he can play the video", it has been suggested that I customize the button itself.

For the second event,"Using the play/pause button in the control bar", I didn't find anything that shows how I can detect the onClick event when the user clicks on one of the control bar buttons.

For the third event,"Clicking on the video itself will play/pause it.", I didn't find anything.

I thought using the state like it's mentioned in the documentation would easily solve all three:

State We use redux to manage the player state. Using getState method can get the state object. This is the list of all the states.

This partly solves the paused problem:

paused:Returns whether the player has been paused

But, I did not find a state property that changes whenever the video gets played. The closest thing to this is hasStarted:

hasStarted:Returns whether the video has been started

The problem with hasStarted is that it gets set to true the when the video gets played the first time.
And so subsequenty play(s) will not get detected.
And I find myself in an ambiguous state where this.player.paused & this.player.hasStarted are both true.
Any suggestion is welcome.