从Angular 2 Typescript播放HTML5视频
从Angular 2 Typescript播放HTML5视频
提问于 2016-11-01 20:34:03
当用户单击视频区域本身时，我想开始以编程方式从TypeScript播放HTML视频。
这是我的HTML代码：
<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>这是我的TypeScript代码：
@ViewChild('videoPlayer') videoplayer: any;
toggleVideo(event: any) {
this.videoplayer.play();
}问题是我得到一个错误，说play()函数没有定义/存在。这里会有什么错误呢？
回答 4
Stack Overflow用户
发布于 2018-07-26 13:50:36
其他人已经回答了基本问题(您必须使用nativeElement)。但是，由于nativeElement的类型是any，您应该将其‘强制转换’为更具体的元素类型(对于<video>标记，这是HTMLVideoElement)。
const video: HTMLVideoElement = this.videoElement.nativeElement;
video.play();这将为您提供所有支持的方法和属性的智能感知。
当然，这一切都只是编译时间--你没有转换任何东西，如果元素不是真正的视频，你仍然会得到一个错误。
Stack Overflow用户
发布于 2018-10-13 18:23:48
为了类型安全，可以使用HTMLVideoElement设置videoPlayer变量的另一种方法
videoPlayer: HTMLVideoElement;
@ViewChild('videoPlayer')
set mainVideoEl(el: ElementRef) {
this.videoPlayer = el.nativeElement;
}
toggleVideo(event: any) {
this.videoplayer.play();
}Stack Overflow用户
发布于 2020-07-08 16:00:30
这是我的HTML代码：
<video controls class="video" (play)="video()" autoplay #videoPlayer>
<source src="assets/video/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>这是我的TS代码：
@ViewChild('videoPlayer') videoplayer: ElementRef;
video() {
console.log('im Play!');
this.videoplayer?.nativeElement.play();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40360174
复制相关文章
相似问题