Angular下Chrome自动播放背景视频问题
给登录页面添加自动播放视频背景时,始终无效,Firefox,safari却播放的很好。
突然记起 谷歌曾发布阻止网页声音自动播放,<audio autoplay></audio> <video autoplay></video> 怀疑是Chrome播放策略的问题,然而发现别人的网站都能播放,只有自己的有问题后开始各种配置nginx参数,终无效。开始使用使用原生html直接部署到nginx访问,but竟然能够播放了。
定位Angular中video 的muted 引入方式:
终于发现问题竟然是`muted="muted"` 需要用Angular属性的方式引入`[muted]="'muted'"` now 大写的OK 出来了
<video autoplay="true" loop [muted]="'muted'">
<source [attr.src]="'assets/video/bg.mp4'" type="video/mp4"></source>
</video>
or
<video onloadedmetadata="this.muted=true" autoplay>
<source src="assets/video/bg.mp4" type="video/mp4" />
</video>
附:关系不大的 Google暂停网页自动播放功能