从 Angular 2 Typescript 播放 HTML 5 视频答案

【问题标题】：Playing HTML 5 video from Angular 2 Typescript从 Angular 2 Typescript 播放 HTML 5 视频
【发布时间】：2017-03-14 14:21:35
【问题描述】：

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

【问题讨论】：

标签： html angular angular2-template

【解决方案1】：

问题是您正在尝试使用 video 元素的 id 引用它。您需要改用模板引用变量 (#)：

<div class="video">
    <video controls (click)="toggleVideo()" #videoPlayer>
        <source src="{{videoSource}}" type="video/mp4" />
        Browser not supported
    </video>
</div>

详细了解模板引用变量here。

编辑：

另外，在您的toggleVideo(event: any) 函数中，您需要获取nativeElement 然后调用play() 函数，因为您正在直接访问DOM 元素：

@ViewChild('videoPlayer') videoplayer: ElementRef;

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

感谢@peeskillet 这个。

【讨论】：

感谢您的回复！我仍然收到一个异常，显示为this.videoplayer.play is not a function。
@Rai 你确定video 有play 功能吗？
我认为你需要从 elementRef 中获取原生元素。视频是标准的html。见mdn
认为这可能对这篇文章的其他人有所帮助...在 toggleVideo 功能内切换暂停和播放：this.videoplayer.nativeElement.paused ? this.videoplayer.nativeElement.play() : this.videoplayer.nativeElement.pause();
Chrome 已更改自动播放政策，developers.google.com/web/updates/2017/09/…。要在 chrome 中工作，请在播放前将视频静音。

【解决方案2】：

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

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

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

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

【讨论】：

感谢您指出正确的类型。重要的是要注意 HTMLVideoElement 是视频标签的 ElementRef.nativeElement 的类型。

【解决方案3】：

这是将videoPlayer 变量设置为使用HTMLVideoElement 以实现类型安全的另一种方法

videoPlayer: HTMLVideoElement;

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

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

【讨论】：

【解决方案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();
  }

【讨论】：

【解决方案5】：

我就是这样做的：

<video (click)="playVideo($event)">
  <source src="video.mp4" type="video/mp4">
</video>

TS

playVideo(event) {
   event.toElement.play()
}

【讨论】：

请考虑添加解释为什么这样有效。请记住，您的答案不仅仅是针对最初的问题（现在已经超过 3 年了），而是针对有同样问题的未来读者。
如果你使用 console.log($event) 你会看到 toElement 是被点击的元素，它是
所以这确实有效，但暂停视频似乎不起作用