在Angular 2中获取视频标签的源尺寸

Question

我正在构建一个视频组件，我需要获取源视频（源文件或容器）的尺寸，以将其传递给同级组件。我正在使用此代码：

//Video component
@Component({
    moduleId: module.id,
    selector: 'kt-media',
    templateUrl: 'kt-media.component.html'
})

export class KT_MediaComponent implements AfterViewInit{
  ...
  private ktIsMedia:  boolean;
  private ktMediaType: string; 
  @ViewChild('ktVideo') ktVideoElement;

  constructor(private el: ElementRef, private renderer: Renderer) {
    this.setMediaType();
  }

  ngAfterViewInit(){
    this.ktVideoElement = this.getSize();  
  }

  setMediaType(){
    //This implementation works fine, I hide it for clarity of the problem
    //Sets this.ktIsMedia to true and this.ktMediaType to 'video'
  }
  getSize():ktSize{
        let w = this.ktVideoElement.nativeElement.videoWidth;
        let h = this.ktVideoElement.nativeElement.videoHeight;
        return {width: w, height: h}
  }    
}

这里是组件的模板：

<div *ngIf="ktIsMedia && ktMediaType === 'video'" >
    <video
        #ktVideo>
        <source 
            [attr.src]="ktMediaSrc |safeUrl" 
            type="video/{{ktVideoType}}">
    </video>
</div>

视频显示正确，但在探索 vs 代码调试器时，它显示 ktVideoElement videoWidth 和 videoHeight 为 0。我尝试在不同的生命周期挂钩上实现 getSize()：aferviewinit、oninit 等...总线总是返回0 作为视频的尺寸。是否可以获得源文件的尺寸，或者一旦文件加载到视图中？如果是，我该如何实现？

Answer 1

根据https://stackoverflow.com/a/4129579/217408，这应该可以：

<div *ngIf="ktIsMedia && ktMediaType === 'video'" >
    <video (loadmetadata)="ktVideoElement = getSize()"
        #ktVideo>
        <source 
            [attr.src]="ktMediaSrc |safeUrl" 
            type="video/{{ktVideoType}}">
    </video>
</div>

Answer 2

根据 Günter 的回应，最终奏效的是：

<div *ngIf="ktIsMedia && ktMediaType === 'video'" >
    <video
        #ktVideo
        (loadedmetadata)="ktSize = getSize()">
        <source 
            [attr.src]="ktMediaSrc |safeUrl" 
            type="video/{{ktVideoType}}">
    </video>
</div>

我将 'loadmetadat' 更改为 'loadedmetadata' 并放入视频标签，而不是源标签。