video标签页面打开自动播放问题总结

近期做的项目，需求是在页面打开时播放视频

一打眼，简单，抬手就写 

// html部分
<video loop controls  autoplay id="videomain">
    <source src="" type="video/mp4">
</video>
// js部分

let video1=document.querySelector("#videomain")

video1.src="build/assets/mp4/move2.mp4"

video1.load()

video1.play()

video标签自动循环播放，OK，运行下试试，报错： Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first ... 

百度了一下，发现从Chrome的66代版本之后，都是不自动播放的。

一开始，一脸懵逼，搜了下，video标签还有个muted（静音播放），加上后，视频是能播放了，但没声音啊0.0

经百度及调研，报错提示的大致意思是说，用户还没有交互，不能调play。用户的交互包括哪些呢？包括用户触发的touchend, click, doubleclick或者是 keydown事件，在这些事件里面就能调play.

想了下，点击、双击、按键都算用户交互，那鼠标移动算不算，要是算的话，那太好了

经测试，可以！

直接最外层dom，addEventListener('mousemove', function(){ video的dom调用play() })

完美解决！！！