audio或video标签 autoplay无效 或 .play()报错问题 解决方案

video标签

video标签设置 autoplay 无效，一般的解决办法是 在video标签上设置 muted 属性 即可。

muted 属性的作用：是否静音

 也就是说，想让video标签自动播放视频，必须先设置为静音。原因下面一起说。

audio标签

audio标签设置 autoplay 无效，或者在 js 中用 audio.play() 报以下错误：

 而且audio标签 即使设置了 muted 属性也不能自动播放（解决方法最后说）。

原因分析

其实从报错信息也可以了解到，DOMException: play() failed because the user didn't interact with the document first 意思就是说：调用audio.play()方法之前，用户必须先和页面有交互，否则调用失败。

这也是video标签自动播放视频，为何必须先设置静音的原因。

用户和页面之间有交互：其实就是指 用户与页面要发生了事件，才算有交互。比如 鼠标事件（单击 onclick，双击 ondblclick，按下 onmousedown，松开 onmouseup，右击 oncontextmenu 等），键盘事件（按下 onkeydown，松开 onkeyup 等）等。

 注意：onmouseenter，onmouseleave，onmouseover，onmouseout 等某些事件，并不算用户与页面发生了交互。比如说，你想在onmouseenter事件发生的回调函数中，执行 audio.play() 也是会报错的，因为谷歌浏览器认为这不算有交互。

 解决方法

明白了原因，其实解决方法就很多了。

打个比方：进入某个页面之后，想在3秒后能 成功调用 audio.play() 播放音频，你可以在3秒内随便单击一下页面的某个地方，这样谷歌浏览器就认为 用户与页面已经有交互了，那么3秒一到，play()方法调用成功，音频就正常播放了。 

既然是这样，那么在用户进入页面的时候，只要引导用户先去触发这些事件，问题就解决了。

• 方法1：进入页面时，可以做个欢迎弹窗之类的，引导用户点击关闭（这样就有交互了），然后就可以 自动播放 音频，或者 自动播放 有声视频。
• 方法2：直接做个播放按钮之类的，引导用户点击之后才调用 音频播放 或 有声视频播放。