前言

项目需求：希望宣传页上，循环播放视频动画效果，设计师提供了一个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授权：允许自动有声播放

原文如下所示：

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

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