Question

我需要检查视频是纵向还是横向，因为我试图以这种方式获取视频的高度和宽度，

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

@Component({
  selector: 'app-videplayer',
  template: `<video id="singleVideo">
                <source src="/assets/videoname.mp4" type="video/mp4">
            </video>`
})
export class VideplayerComponent implements OnInit, AfterViewInit {
  constructor() {}

  ngOnInit() {
  }

  ngAfterViewInit() {
    const videoElem: HTMLVideoElement = <HTMLVideoElement>document.getElementById('singleVideo');
    const vidH = videoElem.videoHeight;
    const vidW = videoElem.videoWidth;
    console.log(vidH, vidW); // this returns: 0, 0
  }

}

我尝试在构造函数，ngOnInit和ngAfterViewInit函数中获取视频的高度，宽度，但我的高度和时间都是0。

Answer 1

尝试使用offsetHeight和offsetWidth，如下所示：

const vidH = videoElem.offsetHeight;    
const vidW = videoElem.offsetWidth;

并且，如果仍然无效，请尝试使用timeout中的ngAfterViewInit()部分，如下所示：

ngAfterViewInit() {
    setTimeout(function () {
       const videoElem: HTMLVideoElement = <HTMLVideoElement>document.getElementById('singleVideo');
       const vidH = videoElem.offsetHeight;
       const vidW = videoElem.offsetWidth;
       console.log(vidH, vidW); // this returns: 0, 0
    }, 500);
}

Answer 2

来自MDN，在videoHeight / -Width属性中：

如果元素的就绪状态为HAVE_NOTHING，则值为0

https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement

我认为你最好的选择是设置一个readystatechange事件处理程序，然后检查状态是否为＆gt; 0（HAVE_NOTHING），然后读取尺寸。（下一个readyState将是1 / HAVE_METADATA，并且视频尺寸应该可用。）

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

如何在Angular 2，TypeScript中获取视频的高度和宽度

2 个答案: