我正在构建一个视频组件,我需要获取源视频(源文件或容器)的尺寸,以将其传递给同级组件。我正在使用这段代码:
//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 Code 调试器,它显示 ktVideoElement videoWidth 和 videoHeight 为 0。我尝试在不同的生命周期 Hook 上实现 getSize():aferviewinit、oninit 等...总线总是返回0 作为视频的尺寸。是否可以获取源文件的尺寸或将文件加载到 View 中后获取尺寸?如果可以,我该如何实现?
最佳答案
根据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>
关于javascript - 获取 Angular 2 中视频标签的源尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40692165/