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

Question

谁能解释为什么这个自动播放视频在 chrome 中不起作用？

视频存储在 Firebase 存储中。它在您访问页面然后返回主页时播放，但在您第一次进入刷新页面时不播放。它也是一个 angular 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
  >

Answer 3

您可以像 'pure angular' 解决方案一样全局覆盖视频[autoplay] 标签

@Directive({
    selector: 'video[autoplay]',
    host: {
        'autoplay': '',
        'oncanplay': 'this.play()',
        'onloadedmetadata': 'this.muted = true'
    }
})
export class VideoAutoplayDirective {}

Answer 4

在我的情况下，以下内容足以让 Angular 10 个像 GIF 一样的自动播放视频：

<video
  src="...mp4"
  type="video/mp4"
  playsinline
  loop
  autoplay
  [muted]="true"
></video>

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

Angular HTML Fullscreen Video Autoplay Not Working

javascript

video

autoplay

typescript

angular