Chrome浏览器音/视频无法自动播放

        背景：由于google的一些制度，我们在写html项目时会发现刷新页面时无法自动播放audio和video，即使你添加了autoplay属性也无济于事， 但是IE和Edge浏览器是可以自动播放的。

        解决方案：

本人在网上搜寻了很多方法，最后发现几个关键点：

首先是谷歌浏览器的相关政策，自从 Chrome 66 开始限制了 video 和 audio 元素的自动播放，从 Chrome 71 开始限制了 Web Audio API 的自动播放，因此一些网页游戏和 webrtc 相关的音视频项目都会相应受到影响。

推荐使用第四种。

方法一：

首先是视频自动播放的问题，常规的方法是给 video 标签增添 muted 属性 

1. <s><video src="xxx.mp4" autoplay="auto play" muted="" controls="controls">
2. </video></s>

复制代码

这样就能静音自动播放视频了。

第二种方法：

只适用 Chrome 66 以下的版本

        打开 chrome 浏览器，地址栏中输入：chrome://flags。在页面内搜索栏中写入：Autoplay policy，并将默认为“Default”，修改为 “No user gesture is required” 后，重启浏览器。

但 Chrome 66 以上的版本貌似搜索不到 Autoplay policy ，因此无法使用第二种方法。

所以第二个办法基本不行了。

第三种方法

就是修改浏览器的设置，找到声音设置：

第一步：

第二步：添加对应的网站地址或者html 代码，允许其播放声音。

第四种

插入js代码，点击屏幕即可播放音乐，目前看来这个应该是最好的。

4. <meta charset="UTF-8">
5. <title>背景音乐示例</title>
9. <h1>欢迎来到我的网站</h1>
10. <!-- 插入背景音乐 -->
11. <audio id="bgm" loop="" controls="">
12. <source src="sound/bgm1.mp3" type="audio/mpeg">
13. 您的浏览器不支持 audio 标签。
14. </audio>
16. <!-- 点击页面播放音乐js -->
17. <script>
18. document.addEventListener('click', function() {
19. var audioElement = document.getElementById('bgm');
20. if (audioElement.paused) { // 检查音频是否已播放
21. audioElement.volume = 0.5; // 设置音量
22. audioElement.play(); // 播放音频
23. }
24. }, { once: true }); // 确保事件处理器只执行一次
25. </script>

复制代码