如何在 angular2 中访问视频元素属性?

Question

在播放视频之前，我无法访问视频元素属性。

我目前正在检查ngOnInit的视频持续时间，并返回NaN值。

我获取持续时间的代码行是：

.HTML：

<video src="myvid.mp4" #vid></video>

打字稿：

@ViewChild('vid') vid: ElementRef
ngOnInit(){
//vid is of type ElementRef
this.duration = this.vid.nativeElement.duration
}

Answer 1

未加载视频的元数据，因此在播放视频之前无法访问duration等属性。要加载元数据，请将视频元素的preload属性添加值为metadata。然后，应为loadedmetadata事件添加事件处理程序。以下是我所做的更改：

.HTML

<video src="myvid.mp4" preload="metadata" (loadedmetadata)="vidProps($event)"></video>

打字稿

@ViewChild('vid') vid: ElementRef
vidProps(event){
this.duration = event.srcElement.duration
}