近日前端开发某个网页时,需要里面的视频一打开页面就自动播放,通过Js代码 document.getElementById("video041").play(); 时发现谷歌浏览器提示:failed because the user didn't interact with the document first. 错误【用户没有先去跟网页做交互再执行音频播放】。video无法自动播放视频,奇怪了!给video标签设置了 autoplay="autoplay"也不行。为什么video自动播放为什么不起作用呢?
video自动播放为什么不起作用
查 mdn 发现需要设置 muted 属性,给video标签加上 muted 属性就可以自动播放了,muted="true"是表示关闭视频声音,静音的意思;
原因是: 谷歌浏览器从2018年1月起就不再自动播放内容了,需要用户手动配置。谷歌浏览器和火狐浏览器为了提高用户体验,减少数据消耗,不支持非静音自动播放。只有当muted autoplay始终被允许才能自动播放没有声音的视频。
后面又发现在 iOS 上视频还是无法自动播放,一查发现还需要设置 playsinline 属性,添加 playsinline 实现 video 在 iOS 的自动播放。
最终代码
<video width="550" autoplay muted playsinline loop>
<source src="video.mp4" type="video/mp4" />
</video>