妙招-Mac上chrome上video标签视频无法自动播放

问题描述

最近写的页面在chrome中打开时,video标签都不能自动播放(奇怪的是相同的视频,两个月前在chrome下播放还是正常的;但现在,mac下一直无法播放,只有在controls的模式下点击播放按钮才可以播放;而windows下按F5刷新后可以播放,但是右键刷新页面无法播放),Firefox却是正常播放。

解决方案

<video muted src="" autoplay loop></video> // 添加muted属性就可以了

妙招原理

高版本浏览器,对视频静音后,可以保证视频自动播放

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    • On mobile, the user has added the site to his or her home screen.
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.