Angular 5 - Get current time of video

Question

I have HTML5 video in my component and want to get the current video time, while it is playing.

Here is what I've tried and it only gets the time once initially.

Component TS:

export class RegisterComponent implements OnInit, OnChanges {

  @ViewChild('videoPlayer')
  private videoPlayer: ElementRef;

  constructor() { }

  ngOnInit() {
    // only logs once
    console.log(this.videoPlayer.nativeElement.currentTime);
  }

  ngOnChanges() {
    // only logs once
    console.log(this.videoPlayer.nativeElement.currentTime);
  }
}

Component HTML:

<video #videoPlayer [autoplay]="true" class="video">
    <source src="assets/videos/temp.mp4" type="video/mp4"/>
      Browser not supported
</video>

Answer 1

You can bind to the timeupdate event on the video tag set a variable to the value of the currentTime property of the video element.

Component TS:

export class RegisterComponent  {

  currentTime: number;

  setCurrentTime(data) {
     this.currentTime = data.target.currentTime;
  }
}

Component HTML:

<video [autoplay]="true" (timeupdate)="setCurrentTime($event)" class="video">
    <source src="assets/videos/temp.mp4" type="video/mp4"/>
      Browser not supported
</video>