前端老生

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暂停网页自动播放功能

Google starts blocking annoying autoplay videos in Chrome