【H5-chrome】chrome自动播放音频的问题

最新推荐文章于 2025-10-24 16:38:41 发布
原创 最新推荐文章于 2025-10-24 16:38:41 发布 · 2.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在最新的Chrome及Chromium内核浏览器中，自动播放音频和视频功能已被禁用，即使设置了autoplay属性也无法实现自动播放。本文介绍了一种解决方法，通过调整网站的声音设置，将‘阻止’改为‘允许’，从而实现音频的自动播放。

在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。（Google的某些做法还真是令开发者不爽）。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。

 

设置方式：

打开希望自动播放音频的网址

然后在网址的前面点击

 

找到声音设置：

改成允许就可以自动播放

react-h5-audio-player:用UIReact音频播放器组件。 它在台式机和移动设备上提供时间指示器
05-12
React H5音频播放器 音频播放器组件，可在不同的浏览器上提供一致的UI / UX。 超级可定制的布局 带有SVG图标的Flexbox CSS。 移动友好。 支持辅助功能，支持键盘事件。 支持媒体源扩展（MSE）和加密媒体扩展...
H5player-2.1.2
12-29
2. 多媒体支持：此版本的H5player优化了对音频、视频、图像等多媒体资源的处理，提供流畅的播放体验，支持常见格式如MP4、WebM、Ogg等。 3. 自定义交互：H5player-2.1.2支持用户自定义控件和界面，可以根据需求定制...
实现chrome浏览器内核自动播放功能-突破浏览器限制
m0_67682227的博客
10-07 1851
上面的是一些常用的js监听事件，Js监听事件是不受限制的，但用户只要做出任何操作就能被事件监听给监听到，你鼠标只要动一下，松开一下，这个音乐就开始放了，如果你进入一个网页，你什么事都不干，那么就说明现在这个网页你不使用，可能用户只是在浏览器中不小心点错了，那么你播放音频视频那纯属扰民啊！鼠标事件（Mouse Events）：例如鼠标点击（click）、双击（dblclick）、按下（mousedown）、抬起（mouseup）、移动（mousemove）等。我是用让它自动播放，肯定不能让用户手动点击啊。
让谷歌浏览器自动播放音频设置方法
qq_39951524的博客
03-21 4823
谷歌浏览器默认是不会自动播放视频的，如何使谷歌浏览器自动播放视频
解决谷歌浏览器无法自动播放音频文件限制
最新发布
weixin_65633147的博客
10-24 152
新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了。3、找到“声音”设置项，设置为“允许”即可。1、打开需要设置自动播放音频的网站。也一样不能自动播放。但是我们可以通过网站设置解决。2、在网址地址栏前点开网站设置。
谷歌浏览器音频自动播放HTML,修改系统设置让 Chrome 浏览器支持音频自动播放
weixin_30427953的博客
06-02 2332
Android Chrome 浏览器默认禁止音频自动播放，但可以通过修改系统配置参数允许这个功能。在 Android Chrome 60.X 版本之前，chrome://flags 中有一个 disable-gesture-requirement-for-media-playback 的选项，在浏览器中输入 chrome://flags/#disable-gesture-requirement-f...
Chrome默认不能自动播放音频？有办法！！！
qq_24518001的博客
01-07 3835
谷歌浏览器（GoogleChrome）以及其他现代浏览器对音频和视频的自动播放实施了严格的限制，这是为了提升用户体验、节省带宽并减少不必要的打扰。根据这些政策，浏览器通常不允许网页在没有用户交互的情况下播放带有声音的媒体内容。
chrome浏览器如何设置自动播放音视频
sj1231984的专栏
09-09 5922
这个的意思是 ：通常发生在尝试在没有用户交互的情况下播放音频或视频时。现代浏览器（如 Chrome 和 Firefox）为了防止自动播放广告和其他不受欢迎的内容，要求在播放媒体之前必须有用户交互（如点击或按键）。1、打开chrome://settings/content/sound 页面。2、按照下图添加域名即可。
js --自动播放音频
weixin_30443075的博客
09-02 5288
简介 基本使用 chrome下无法自动播放问题处理 简介 音频的播放使用audio进行操作，可以有两种方式处理（纯js和html标签+js）。 audio是html5的新标签，用于定义声音 audio的属性（引用w3school） 属性值描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 ...
h5-video-audio-ctl-crx插件：高效控制H5视频音频播放
在h5-video-audio-ctl-crx插件中，定义了Alt + S、Alt + 1、Alt + 2、Alt + 3等快捷键来实现对视频或音频播放的控制。 4. 自定义扩展程序功能：Chrome扩展程序允许开发者根据需要自定义扩展的功能和用户界面。在这...
h5 ＜audio＞音乐自动播放，谷歌禁止音乐自动播放处理方法
V199311的博客
01-19 2677
html代码 <a href="javascript:;" class="musicBtn functionBtn2 on" id="mc_play">音乐开 <audio id="music" loop="loop" autoplay="autoplay" preload="auto" muted> <source src="/test/bgMp3.mp3" type="audio/mpeg"> </audio> <.
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
10-14
主要介绍了vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
chrome谷歌浏览器如何让网站可以自动播放音乐
xvzhengyang的博客
12-25 1万+
众所周知,谷歌浏览器在18年开始禁止网页自动播放音乐和视频,除非是静音播放;但是需求又需要我们当在一个合适的时机去播放声音,这就比较麻烦了; 第一步,浏览器-设置页面-搜索"网站设置" 第二步,打开网站设置-找到 "声音" 第三步:添加网站 第四步:检查声音 到此为止,浏览器重新打开即可 ...
浏览器自动播放音视频-前端实现方案_“webbrowser 自动播放声音”
2401_87557104的博客
11-13 1584
在开发中可能有遇到这样的需求，当用户打开页面后，需要自动播放视频或音频，按理说那就打开页面时play()一下不就搞定了吗，但实际情况很明显不是，不然也没得这篇文章喽，要实现这个需求，我们得先了解一下浏览器自动播放策略。再给出相应解决方案。
H5实现视频自动播放并且有声音
weixin_45316408的博客
06-03 1万+
最近开发了一个项目 需求是
谷歌浏览器audio标签自动播放音乐问题解决
热门推荐
a545132569的博客
10-10 7万+
前面一篇博客中有audio标签自动播放音乐的代码，可是后来再打开页面时音乐自动播放报错了； 看了网上的一些帖子才知道原来在4月份谷歌浏览器做了改革，不止谷歌， 其他浏览器好像也不支持自动播放了，现贴出解决方案： 1.在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default”， 修改为 “No user gesture is ...
前端实现页面自动播放音频方法
阿酷tony
12-19 1574
在Chrome和其他现代浏览器中，为了改善用户体验，自动播放功能受到了限制。Chrome的自动播放策略主要针对有声音的视频，目的是防止页面在用户不知情的情况下自动播放声音，打扰用户。
html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上...
weixin_30499315的博客
06-03 2303
需求有新订单的时候，页面自动语音提示和弹出提示框；问题chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：Uncaught (in pr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值