Angular 2+TypeScript中获取视频宽高始终返回0的问题求助

这个问题我之前也碰到过！核心原因是你在视频元数据还没加载完成的时候就去获取宽高了——ngAfterViewInit只是确保DOM元素渲染好了，但视频文件本身还没被浏览器解析，所以videoHeight和videoWidth自然是0。

下面给你几个可靠的解决方案，还顺便帮你实现了横竖屏判断的逻辑：

方案1：监听loadedmetadata事件（推荐） #

这是最标准的做法，当浏览器加载完视频的元数据（包括宽高、时长等信息）时，会触发loadedmetadata事件，这时就能拿到正确的宽高了。另外推荐用Angular的ViewChild代替document.getElementById，更符合框架的最佳实践：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; 

@Component({ 
  selector: 'app-videplayer', 
  template: `<video #singleVideo> <source src="/assets/videoname.mp4" type="video/mp4"> </video>` 
}) 
export class VideplayerComponent implements OnInit, AfterViewInit { 
  // 通过模板引用变量获取视频元素
  @ViewChild('singleVideo') videoElem!: ElementRef<HTMLVideoElement>;

  constructor() {} 
  ngOnInit() { } 
  ngAfterViewInit() { 
    const video = this.videoElem.nativeElement;
    
    // 监听元数据加载完成事件
    video.addEventListener('loadedmetadata', () => {
      const vidH = video.videoHeight; 
      const vidW = video.videoWidth; 
      console.log('视频宽高:', vidW, vidH);

      // 判断横竖屏
      if (vidH > vidW) {
        console.log('视频是竖屏（portrait）');
      } else {
        console.log('视频是横屏（landscape）');
      }
    });

    // 手动触发视频加载（如果视频没有自动加载的话）
    video.load();
  } 
}

方案2：用Async/Await等待加载完成 #

如果你习惯用异步语法，也可以把加载逻辑封装成Promise，用async/await来等待元数据加载：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; 

@Component({ 
  selector: 'app-videplayer', 
  template: `<video #singleVideo> <source src="/assets/videoname.mp4" type="video/mp4"> </video>` 
}) 
export class VideplayerComponent implements OnInit, AfterViewInit { 
  @ViewChild('singleVideo') videoElem!: ElementRef<HTMLVideoElement>;

  constructor() {} 
  ngOnInit() { } 

  async ngAfterViewInit() { 
    const video = this.videoElem.nativeElement;
    video.load();

    try {
      // 等待元数据加载完成
      await new Promise<void>((resolve) => {
        video.addEventListener('loadedmetadata', () => resolve(), { once: true });
      });

      const vidH = video.videoHeight; 
      const vidW = video.videoWidth; 
      console.log('视频宽高:', vidW, vidH);

      // 横竖屏判断
      const isPortrait = vidH > vidW;
      console.log(isPortrait ? '竖屏（portrait）' : '横屏（landscape）');
    } catch (error) {
      console.error('视频加载失败:', error);
    }
  } 
}

注意事项 #

• 确保你的视频路径/assets/videoname.mp4是正确的，Angular的assets文件夹需要在angular.json中配置正确。
• 如果视频是跨域资源，需要服务器配置CORS，否则浏览器可能无法加载元数据。
• 某些老旧浏览器可能不支持loadedmetadata事件，但现在主流浏览器都没问题。

内容的提问来源于stack exchange，提问作者abhijeetwebdev