音频视频自动播放解决方案

1、音频视频自动播放解决方案

---

1.1、使用背景

公司项目需要用到音频自动播放的功能，首先想到的就是autoplay属性。

想让内容自动播放的最简单方法是将autoplay属性添加到元素，并将autoplay属性设置为 true ，当 autoplay 的属性为 true 时，媒体元素将在发生以下情况后尽快自动开始播放：

• 页面允许使用自动播放功能

• 媒体元素已在页面加载期间创建

• 假设网络性能或带宽没有显着变化，且已收到足够的媒体流并已开始播放，继续播放直至媒体结束而不会中断。

然而在实际操作的过程中，发现自动播放失败，并且出现如下的报错

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

这个问题当时困扰了我许久，一路解决的过程也是十分坎坷，所以我决定将解决方案记录下来，下面是我在解决问题的过程中找到的一些资料以及解决问题的方案。