播放Angular 2 Typescript中的HTML 5视频

Question

当用户点击视频区域本身时,我想以编程方式从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()函数未定义/存在.这可能是什么错误？

Answer 1

问题是你正在尝试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: ElementRef;

toggleVideo(event: any) {
    this.videoplayer.nativeElement.play();
}

致@peeskillet的这一点.

Answer 2

其他人已经回答了基本问题（您必须使用nativeElement）。但是，由于nativeElement是类型，any您应该将其“转换”为更具体的元素类型（对于<video>标记，这是HTMLVideoElement）。

 const video: HTMLVideoElement = this.videoElement.nativeElement;
 video.play();

这将为您提供所有支持的方法和属性的智能感知。

当然，这只是编译时间——你没有转换任何东西，如果元素不是真正的视频，你仍然会得到一个错误。

Answer 3

这是设置videoPlayer变量以用于HTMLVideoElement类型安全的另一种方法

videoPlayer: HTMLVideoElement;

@ViewChild('videoPlayer')
  set mainVideoEl(el: ElementRef) {
    this.videoPlayer = el.nativeElement;
  }

toggleVideo(event: any) {
    this.videoplayer.play();
}

Answer 4

这是我的 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();
  }