从 Angular 2 Typescript 播放 HTML 5 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40360174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Playing HTML 5 video from Angular 2 Typescript
提问by SoundStage
I want to start playing a HTML video programmatically from TypeScript when the User clicks on the Video area itself.
当用户单击视频区域本身时，我想从 TypeScript 以编程方式开始播放 HTML 视频。
This is my HTML code:
这是我的 HTML 代码：
<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
This is my TypeScript code:
这是我的打字稿代码：
@ViewChild('videoPlayer') videoplayer: any;
toggleVideo(event: any) {
this.videoplayer.play();
}
The issue is that I get an error that says play()function is not defined/exists. What could be the mistake here?
问题是我收到一个错误，指出play()函数未定义/存在。这里可能有什么错误？
回答by Stefan Svrkota
Problem is you're trying to get a reference to videoelement using its id. You need to use template reference variable(#) instead:
问题是您试图video使用它的id. 您需要改用模板引用变量( #)：
<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.
在此处阅读有关模板引用变量的更多信息。
Edit:
编辑：
Also, in your toggleVideo(event: any)function, you need to get nativeElementand then call the play()function because you are accessing DOM element directly:
此外，在您的toggleVideo(event: any)函数中，您需要获取nativeElement然后调用该play()函数，因为您直接访问 DOM 元素：
@ViewChild('videoPlayer') videoplayer: ElementRef;
toggleVideo(event: any) {
this.videoplayer.nativeElement.play();
}
Credits to @peeskillet for this one.
归功于@peeskillet 这个。
回答by Simon_Weaver
Others have already answered the basic question (you must use nativeElement). However, since nativeElementis of type anyyou should 'cast' it to a more specific element type (for the <video>tag this is HTMLVideoElement).
其他人已经回答了基本问题（您必须使用nativeElement）。但是，由于nativeElement是类型，any您应该将其“转换”为更具体的元素类型（对于<video>标记，这是HTMLVideoElement）。
const video: HTMLVideoElement = this.videoElement.nativeElement;
video.play();
This then gives you intellisense for all the supported methods and properties.
这将为您提供所有支持的方法和属性的智能感知。
And of course this is all just compile time - you're not converting anything and you'll still get an error if the element is not really a video.
当然，这只是编译时间——你没有转换任何东西，如果元素不是真正的视频，你仍然会得到一个错误。
回答by brijmcq
Here's another way to set your videoPlayervariable to use HTMLVideoElementfor type safety
这是设置videoPlayer变量以HTMLVideoElement用于类型安全的另一种方法
videoPlayer: HTMLVideoElement;
@ViewChild('videoPlayer')
set mainVideoEl(el: ElementRef) {
this.videoPlayer = el.nativeElement;
}
toggleVideo(event: any) {
this.videoplayer.play();
}
回答by anirudh aitha
<div class="col-md-9" style="padding-right:0">
<video style="width: 100%;height: fit-content;" controls="controls" #videoPlayer
src="http://localhost:3001/api/v1.0/media/{{movieId}}/stream">
</video>
</div>
#videoPlayer and controls="controls gives the functions for video playing for more customisation please refer clickhere
#videoPlayer和控制=“控制给出了视频播放的功能更多的定制，请参阅clickhere
回答by Ali Alharbi
That's how I did it:
我就是这样做的：
<video (click)="playVideo($event)">
<source src="video.mp4" type="video/mp4">
</video>
TS
TS
playVideo(event) {
event.toElement.play()
}
