1、问题的提出
某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击。
2、尝试解决
加autoplay
“视频自动播放”这个需求是ok的,那我就在video标签上加个autoplay属性嘛,在PC端浏览器里面试了一下,运行流畅,没有遇到什么问题,但是放在手机浏览器里面打开,就跟没设置autoplay是一样的。
监听canplay
那不行的话,我在页面加载完成的时候,监听video的canplay,然后执行play(),应该可以运行了吧?然而放到手机里一看,还是不行。
<video src="video.mp4" controls></video>
var video = document.querySelector('#video');
video.addEventListener('canplay', function () {
video.play();
})
3、思考
问题来了,加autoplay不行,可以理解,可能手机浏览器不支持这个属性吧,但是我监听视频加载完成,手动去play(),这是程序常规方法,为什么也不行?
我尝试在监听回调里面加了个alert,发现没有弹出框。
所以我很长一段时间认为&#x
更多推荐
手机浏览器自动播放视频video(设置autoplay无效)的解决方案
发布评论