背景:由于google的一些制度,我们在写html项目时会发现刷新页面时无法自动播放audio和video,即使你添加了autoplay属性也无济于事, 但是IE和Edge浏览器是可以自动播放的。
解决方案:
本人在网上搜寻了很多方法,最后发现几个关键点:
首先是谷歌浏览器的相关政策,自从 Chrome 66 开始限制了 video 和 audio 元素的自动播放,从 Chrome 71 开始限制了 Web Audio API 的自动播放,因此一些网页游戏和 webrtc 相关的音视频项目都会相应受到影响。
推荐使用第四种。
方法一:
首先是视频自动播放的问题,常规的方法是给 video 标签增添 muted 属性
<videosrc="xxx.mp4"autoplay="auto play"mutedcontrols="controls"> </video>
这样就能静音自动播放视频了。
第二种方法:
只适用 Chrome 66 以下的版本
打开 chrome 浏览器,地址栏中输入:chrome://flags。在页面内搜索栏中写入:Autoplay policy,并将默认为“Default”,修改为 “No user gesture is required” 后,重启浏览器。
但 Chrome 66 以上的版本貌似搜索不到 Autoplay policy ,因此无法使用第二种方法。
所以第二个办法基本不行了。
第三种方法
就是修改浏览器的设置,找到声音设置:
第一步:
第二步:添加对应的网站地址或者html 代码,允许其播放声音。
第四种
插入js代码,点击屏幕即可播放音乐,目前看来这个应该是最好的。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>背景音乐示例</title>
</head>
<body><h1>欢迎来到我的网站</h1><!-- 插入背景音乐 --><audio id="bgm" loop controls><source src="sound/bgm1.mp3" type="audio/mpeg">您的浏览器不支持 audio 标签。</audio><!-- 点击页面播放音乐js --><script>document.addEventListener('click', function() {var audioElement = document.getElementById('bgm');if (audioElement.paused) { // 检查音频是否已播放audioElement.volume = 0.5; // 设置音量audioElement.play(); // 播放音频}}, { once: true }); // 确保事件处理器只执行一次</script></body>
</html>