HTML5 video无法自动播放问题

还是再用react开发项目
先上代码
如下

<video autoPlay="autoPlay" src={video} loop="loop" style={{'width':'100%', 'height':'100%', 'objectFit': 'fill'}}>
             <source src={video} type="video/mp4" />
</video>

正常这么写是没什么问题的
但其实他不会自动播放，只有在用户点击以后才会触发
但是如果在元素挂在完毕以后

element.play();

就会报
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
这个错

解决其实很简单

<video muted autoPlay="autoPlay" src={video} loop="loop" style={{'width':'100%', 'height':'100%', 'objectFit': 'fill'}}>
                  <source src={video} type="video/mp4" />
 </video>

在video标签中加入

muted 即可

以上。