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() })
完美解决!!!