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

时间:2018-12-13 07:10:15

标签: firebase google-cloud-firestore

任何人都可以解释为什么此自动播放视频无法在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>

3 个答案:

答案 0 :(得分: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项目中的答案。

答案 1 :(得分:1)

对于纯Angular解决方案,我们需要使用Angular事件和模板变量(使用公认的答案):

body: FutureBuilder<QuerySnapshot>(
              future: Firestore.instance
                  .collection("products")
                  .document(snapshot.documentID)
                  .collection("items")
                  .orderBy("rec")
                  .getDocuments(),

答案 2 :(得分:0)

您可以像“纯角度”解决方案一样全局覆盖视频[autoplay]标签

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