Angular 5 - 获取当前视频时间

Question

我的组件中有 HTML5 视频，想要在播放时获取当前的视频时间。

这是我尝试过的，它最初只能获得时间。

组件TS：

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

组件HTML：

{{1}}

Answer 1

您可以绑定视频标签上的timeupdate事件，将变量设置为视频元素的currentTime属性的值。

组件TS：

export class RegisterComponent  {

  currentTime: number;

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

组件HTML：

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

Answer 2

<强> HTML

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

<强> TS

public onTimeUpdate(value){
    console.log(value.target.currentTime);
}