html5 - html5从 Angular 2 Typescript播放 HTML 5视频

  显示原文与译文双语对照的内容
120 1

我想在用户点击视频区域时以编程方式从TypeScript开始播放一个HTML视频。

这是我的html代码:


<div class="video">


<video controls (click)="toggleVideo()" id="videoPlayer">


 <source src="{{videoSource}}" type="video/mp4"/>


 Browser not supported


</video>


</div>



这是我的打字代码:


@ViewChild('videoPlayer') videoplayer: any;



toggleVideo(event: any) {


 this.videoplayer.play();


}



问题是我得到一个错误,指出 play() 函数没有定义/存在。 这里的错误是什么?

时间: 原作者:

117 3

问题是你正在尝试使用 video 元素的id 来获取引用。 你需要使用模板引用变量 ( # ):


<div class="video">


 <video controls (click)="toggleVideo()" #videoPlayer>


 <source src="{{videoSource}}" type="video/mp4"/>


 Browser not supported


 </video>


</div>



在这里阅读关于模板引用变量的更多信息。

编辑:

此外,在 toggleVideo(event: any) 函数中,你需要获取 nativeElement,然后调用 play() 函数,因为你正直接访问DOM元素:


@ViewChild('videoPlayer') videoplayer: any;



toggleVideo(event: any) {


 this.videoplayer.nativeElement.play();


}



这里组件的@peeskillet 积分。

原作者:
...