Angular HTML全屏视频自动播放不起作用

Question

谁能解释为什么此自动播放视频无法在chrome中运行？

视频存储在Firebase存储中。当您访问页面然后返回首页时，它会播放，但是当您第一次进入刷新页面时，它不会播放。这也是一个有角度的6应用程序。

  <video autoplay muted loop>
    <source type="video/mp4" src="https://firebasestorage.googleapis.com/v0/b/gortonluxury.appspot.com/o/videos%2Fhero-video.mp4?alt=media&token=1231bda8-4240-4c1d-a0b9-9c5b50b320d0">
  </video>

Answer 1

<video loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>

onloadedmetadata＆oncanplay =“ this.play（）”

是将其加载到Angular 6项目中的答案。

Answer 2

对于纯 Angular 解决方案，我们需要使用 Angular 事件和模板变量（使用已接受的答案）：

   <video #video 
      (canplay)="video.play()"
      (loadedmetadata)="video.muted = true"
  ...// as before
  >