问题描述
当用户单击视频"区域本身时,我想从TypeScript以编程方式开始播放HTML视频.
I want to start playing a HTML video programmatically from TypeScript when the User clicks on the Video area itself.
这是我的HTML代码:
This is my HTML code:
<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
这是我的TypeScript代码:
This is my TypeScript code:
@ViewChild('videoPlayer') videoplayer: any;
toggleVideo(event: any) {
this.videoplayer.play();
}
问题是我收到一条错误消息,提示未定义/存在play()
函数.这可能是什么错误?
The issue is that I get an error that says play()
function is not defined/exists. What could be the mistake here?
推荐答案
问题是您正在尝试使用video
元素获取对video
元素的引用.您需要改用模板参考变量(#
):
Problem is you're trying to get a reference to video
element using its id
. You need to use template reference variable (#
) instead:
<div class="video">
<video controls (click)="toggleVideo()" #videoPlayer>
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
详细了解模板参考变量此处.
Read more about template reference variable here.
此外,在您的toggleVideo(event: any)
函数中,您需要获取nativeElement
然后调用play()
函数,因为您将直接访问DOM元素:
Also, in your toggleVideo(event: any)
function, you need to get nativeElement
and then call the play()
function because you are accessing DOM element directly:
@ViewChild('videoPlayer') videoplayer: ElementRef;
toggleVideo(event: any) {
this.videoplayer.nativeElement.play();
}
为此获得@peeskillet的积分.
Credits to @peeskillet for this one.
这篇关于从Angular 2 Typescript播放HTML 5视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!