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

Posted 2023-05-07

【中文标题】在Angular 2中获取视频标签的源尺寸

【英文标题】：Get source dimensions of video tag in Angular 2

【发布时间】：2017-04-03 04:40:49

【问题描述】：

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

//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 作为视频的尺寸。是否可以获得源文件的尺寸，或者一旦文件加载到视图中？如果是，我该如何实现？

【问题讨论】：

在浏览器控制台中使用$0.videoWidth时是否得到预期值？

是的，它显示正确的尺寸

也许你需要等待视频元素的事件。我没有使用它，但在元素指定其大小之前，可能需要发生一些loaded 或类似事件。您还可以尝试在组件中添加一个调用getSize() 的按钮，以查看您可以在以后从Angular2 中获取预期值。

***.com/a/4129579/217408 似乎表明您需要等待loadmetadata 事件

【参考方案1】：

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

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

【讨论】：

感谢 Günter，因为一些小细节，这不起作用。我把答案放在下面。

起来，对不起。那是一个疏忽。该事件在video 元素上。对ktVideoElement 的分配只是从您的源中复制而来。我没有检查这是否有意义;-)

【参考方案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' 并放入视频标签，而不是源标签。

【讨论】：

我想根据访问页面的人的屏幕大小动态设置视频宽度和高度，但我不明白的是绑定（loadmetadata）和 ktSize 变量在哪里设置