我无法以角度播放视频答案

【问题标题】：I can't play video in angular我无法以角度播放视频
【发布时间】：2020-09-15 07:14:28
【问题描述】：

我正在开发一个 Angular 项目，我有一个组件应该播放 js 文件中的视频。

这是我的html

 <video width="276" height="540" class="video-element" id="video-element" >
  <source [src]="videoFile" type="video/mp4">
  <source [src]="videoFile" type="video/ogg">
</video>

这是我的 js 文件

 const playVideo = document.getElementsByClassName('video-element') as HTMLCollectionOf<HTMLElement>;
 playVideo[0].classList.add('show'); // play video
 playVideo[0].play(); // I get error

我收到错误：“HTMLElement”.ts(2339) 类型上不存在属性“播放”

当我尝试从 js 文件播放视频时。

提前感谢您的帮助:)

【问题讨论】：

标签： angular video

【解决方案1】：

这是因为play 属性在普通HTMLElement 上不存在，但在HTMLMediaElement 上确实存在。

(playVideo[0] as HTMLMediaElement).play(); // should not throw a compiler error

当然，如果playVideo[0] 实际上不是HTMLMediaElement，这仍然会失败。

【讨论】：

【解决方案2】：

首先确保在调用 play 时视频元素存在于 DOM 中。由于您使用的是角度，请使用 viewChild 而不是文档。

如果您在 safari 中进行测试，请使用其他浏览器并检查该行为在 safari 中的变化情况。

【讨论】：