How to pause youtube-player via typescript?

Question

I am doing an application in Angular (9.11) and need to know how long the user watched a video on youtube. I am using the angular youtube-player component. I monitor the state change in the component itself. My problem is when the user leaves the page without pausing the video as the status change event is not triggered. How can I get on ngOnDestroy video time or send a command to the video pause?

<div class="col-12 text-center p-3">
  <youtube-player
    id="player"
    videoId="{{content?.content}}"
    (stateChange)="playerEvent($event)"
    width="712px"
    height="400px"
  ></youtube-player>
</div>

Answer 1

I figured out the trick, save the Event that gets fired when the video gets ready to play:

 <youtube-player
    videoId="{{content?.content}}"
    (stateChange)="playerEvent($event)"
    (ready)="savePlayer($event)"
    width="712px"
    height="400px"
  ></youtube-player>

And in typescript:

savePlayer(event) {
    this.player = event;
}

The variable this player. will have everything you need to command the video by script.