如何訪問 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等屬性。 要加載元數據，請添加值為metadata的 video 元素的preload屬性。 然后，您應該為loadedmetadata事件添加一個事件處理程序。 以下是我所做的更改：

HTML

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

打字稿

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