video自动播放功能，却遭遇google浏览器拦截：play() failed because the user didn‘t interact with the document first

前言

项目需求：希望宣传页上，循环播放视频动画效果，设计师提供了一个mp4给我，可是当我将其放在首页后，却遇到如下错误：

play() failed because the user didn't interact with the document first

视频播放代码为：

<video src="~examples/assets/images/banner.mp4" autoplay="autoplay" loop="loop" id="video"></video>

解决问题

通过翻墙，查阅Chrome的开发网站，得出以下2点结论：

1. 无声的视频总是能自动播放
2. 最上层的frames能给视频源所在的iframes授权：允许自动有声播放

原文如下所示：

Chrome’s autoplay policies are simple:

• Muted autoplay is always allowed.
• Autoplay with sound is allowed if:
  • The 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 played video with sound.
  • The user has added the site to their home screen on mobile or installed the PWA on desktop.
• Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

像我前言提到的，公司的宣传页上需要初次加载完成后，便能自动循环播放，所以用户必须有交互这一点不可取，于是我采用第一点，将video代码改为如下所示，即可自动循环播放了

<video src="~examples/assets/images/banner.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>