近日前端开发某个网页时,需要里面的视频一打开页面就自动播放,通过Js代码 document.getElementById("video041").play(); 时发现谷歌浏览器提示:play() failed because the user didn't interact with the document first. 

该报错是浏览器对于自动播放限制抛出的:play方法调用失败,因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】

play() failed 原因

谷歌浏览器从2018年1月起就不再自动播放内容了,需要用户手动配置。谷歌浏览器和火狐浏览器为了提高用户体验,减少数据消耗,不支持非静音自动播放。只有当muted autoplay始终被允许才能自动播放没有声音的视频。

解决方法

给video标签加上 muted 属性就可以自动播放了,muted="true"是表示关闭视频声音,静音的意思;

后面又发现在 iOS 上视频还是无法自动播放,一查发现还需要设置 playsinline 属性,添加 playsinline 实现 video 在 iOS 的自动播放。

最终代码

<video width="550" autoplay muted playsinline loop>
    <source src="video.mp4" type="video/mp4" />
</video>