chrome已不再支持html中audio标签的autoplay属性

最新推荐文章于 2024-04-13 12:32:07 发布
最新推荐文章于 2024-04-13 12:32:07 发布
阅读量2w 收藏 1
点赞数 7
分类专栏： html 文章标签： html audio autoplay
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40677049/article/details/82861257
版权

今天学习html的时候尝试audio标签中的autoplay属性,发现在chrome打开后无法自动播放，而firefox，edge，ie都可以。

<audio src="./mp3/bgm.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>

在网上查了之后发现相关问题较少，只有几个回答提及到18年chrome已不支持autoplay。

原因大概是为了提高用户体验，防止一进入网页会自动播放声音过大的音频。（在我的测试中自动播放会默认使用最大音量，目前我还不知道是否有调整设置的方法）

码一下

flyation
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
简单介绍HTML5中audio标签的使用
11-21
- 如果需要隐藏默认的播放控件，可以在`<audio>`标签中设置`autoplay`属性： ``` <audio autoplay="autoplay"><source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"></audio> ``` ...
HTML5 video 视频标签使用介绍
09-28
-- 不支持标签时的备选内容 --> 您的浏览器不支持HTML5视频。 ``` **属性说明：** - `width`和`height`：分别指定视频播放器的宽度和高度，单位为像素。 - `src`：定义视频文件的URL，最好使用绝对路径。 - `...
HTML中audio标签设置了autoplay网页无法自动播放的解决办法
Seike_113的博客
11-25 4488
这可能是由于浏览器自身的策略限制所导致的。为了更好的用户体验和减少不必要的网络流量，大多数浏览器都会禁止自动播放音频或视频内容。用户必须手动点击播放按钮才能开始播放。此外，一些网站可能需要用户授权才能自动播放媒体内容，因此在网页中设置autoplay属性不一定能够实现自动播放。
audio或video标签的autoplay属性的说明
cnds123的专栏
12-27 3244
audio或video标签的autoplay属性特别介绍
video标签设置autoplay无效
最新发布
huang_hai_an的博客
04-13 336
在html页面使用video标签的时候，给它设置了autoplay属性，即 autoplay = “autoplay”，发现没有什么效果；解决方法是： 给video标签加上 muted 属性就可以自动播放了，静音的意思；原因是： 谷歌浏览器和火狐浏览器 不支持非静音自动播放。
Audio或video标签 autoplay无效 或 .play()报错问题
Dyaping的博客
04-22 1109
udio或video标签 autoplay无效 或 .play()报错问题
HTML audio video标签的autoplay自动播放关闭
xingdiango的博客
05-04 1972
国内搜索引擎没有查到对应的资料，或者就是资料有问题，不能实现页面加载后自动播放关闭，页面有很多首歌曲，如果全部自动播放就会乱套，因此查询了mozilla官方开发文档。因此我们更改为官方提示的问题解决。
audio或video标签 autoplay无效 或 .play()报错问题 解决方案
苍老师背后的男人
11-02 3万+
video标签 video标签设置 autoplay 无效，一般的解决办法是 在video标签上设置 muted 属性 即可。 muted 属性是 静音的意思 也就是说，想让video标签自动播放视频，必须先设置为静音。原因下面一起说。 audio标签 audio标签设置 autoplay 无效，或者在 js 中用 audio.play() 报以下错误： 而且audio标签 即使设置了 muted 属性也不能自动播放（解决方法最后说）。 原因分析 其实从报错信息也可以了解到，DO..
HTML5中的audio标签概述.pdf
07-11
HTML5的`<audio>`标签是网页开发中用于嵌入音频内容的重要元素，它使得音频在网页中的集成变得更加标准化和简单。以下是对`<audio>`标签的详细解释： 1. **音频标签格式**： `<audio>`标签允许开发者在HTML5文档中...
HTML5 Video/Audio播放本地文件示例介绍
09-28
它首先获取到`<input type="file">`中的第一个文件，然后创建一个Blob URL，并将这个URL赋值给`<audio>`标签的`src`属性，从而实现本地文件的播放。 需要注意的是，这种方法并非所有浏览器都支持。在Chrome 30和...
CEF插件使谷歌 正常使用video和audio
11-24
使用CEFsharp，开发者可以在.NET环境中轻松地创建具有现代Web功能的应用程序，包括支持`video`和`audio`标签的多媒体播放。 当遇到“嵌入式谷歌内核应用不能播放视频和音频”的问题时，这通常是因为CEF或其相关组件...
HTML5页面实现录音功能
11-28
Since Chrome version 47, Voice Recording works only on HTTPS sites 目前基于webikit(谷歌之类的webikit)和Gecko(Firefox 52~57)都可以(不支持苹果移动设备)，测试地址 https://sms.reyo.cn/ 用户名:aa 密码：123456 我们就是想实现像微信一样的能发送语音的聊天数据(只是我们用h5在网页上实现)：
实现Google Chrome音频标签audio、属性autoplay自动播放
XHL的博客
08-19 1901
1、打开chrome浏览器，在地址栏中输入：“chrome://flags”。 2、在页面内搜索栏中写入：“Autoplay policy”，并将默认为“Default”，选择修改为 “No user gesture is required” 。 3、点击“Relaunch Now”即可。 ...
解决audio自动播放无效问题
皮小孩的博客
01-09 2万+
在360或者qq浏览器，audio的自动播放属性目前为止是有效的，网页的body里面插入下面代码后，打开页面就会自动播放音乐。 但是在edge\google等浏览器不支持音乐自动播放。
html5 中 audio 设置 autoplay 仍无法自动播放音频的解决办法
热门推荐
二赛君
02-10 4万+
问题引出 在测试中，发现audio设置autoplay属性，页面加载完成无法自动播放音频，很是费解。 代码如下： <audio preload autoplay loop id="vd"> <source src="./files/xgbb.mp3" type="audio/mpeg"> </audio> 如果有哪位大神知道为什么属性都设置了还无法自...
谷歌关于视频无法自动播放问题
weixin_46528266的博客
08-29 4805
谷歌关于视频无法自动播放问题
解决谷歌浏览器 video 和 audio 标签自动播放（autoplay）无效的方法
maergaiyun的博客
07-23 2万+
Google Chrome 2018年1月起不再自动播放内容，需要自己手动配置。 版本：64.0.3282.186。 1、在浏览器搜索框中输入：chrome://flags/ 2、在进入的页面内搜索：Autoplay 3.找到 "Autoplaypolicy" ，将默认值 "Default" 修改成"No user gesture is required" 4、保存，...
html页面audio的autoplay自动播放音乐失败解决方案
qq_30136729的博客
11-22 8944
这几天写了一个网页，想给网页加一个背景音乐，随着页面加载好自动播放，一直实现不了，也没有报错，后来查询资料原来是因为audio设置的autoplay属性，记录一下。 原本 <audio preload autoplay loop id="music"> <source src="/music/bg.mp3" type="audio/mpeg"> </audio> Chrome提示：DOMException: play() failed because the
audio标签autoplay失效处理
weixin_47084033的博客
03-02 674
<audio :srcObject.prop="_stream" playsInline autoPlay controls muted @canplay="audioAutoPlay($event)" /> audioAutoPlay(event) { console.log("audioAutoPlay"); let autoP.
audio autoplay属性不生效
06-28
### 回答1： 可能是因为浏览器的安全策略限制了自动播放音频。您可以尝试在用户交互（例如点击按钮）后再播放音频，或者使用其他方法来触发音频播放。另外，不同浏览器对autoplay属性的支持程度也不同，您可以查看浏览器的兼容性表格来了解详情。 ### 回答2： audio autoplay 属性不生效通常有以下几个可能原因： 1. 浏览器限制自动播放：现代浏览器通常默认不允许自动播放音频或视频，需要用户的交互才能使其播放。这是为了避免页面自动播放可能会影响用户体验或耗费用户的带宽。解决方法是在播放音频前需要用户进行操作，比如点击按钮、滚动页面等。 2. 浏览器不支持 autoplay 属性：某些旧版本的浏览器可能不支持 autoplay 属性，需要使用 JavaScript 或其他方法来实现自动播放。可以尝试使用一些特定的浏览器前缀或修改属性以实现自动播放。 3. 音频文件无法加载：如果浏览器无法找到或加载音频文件，则自动播放功能将失效。可以通过检查控制台或网络面板来确定文件是否正确加载，如果文件路径出现问题，则可以使用正确的文件路径。 4. 媒体格式不支持：如果音频文件的格式不被浏览器支持，则无法自动播放。可以使用多种格式的文件来确保最广泛的兼容性。常见的支持的音频格式为 MP3、WAV 和 OGG。 总之，要使音频自动播放，必须解决上述可能的问题，并确保浏览器允许自动播放、音频文件正确加载且格式被支持。 ### 回答3： audio autoplay属性是HTML5新增的一个属性，用来控制网页中嵌入的音频文件是否自动播放。当autoplay属性被设置为true时，音频文件会在网页加载后自动播放。但是，有时我们会发现在一些浏览器中，设置了autoplay属性后音频仍未自动播放。这种情况通常是因为浏览器的自动播放策略限制造成的。 针对这种情况，我们可以采取以下措施： 1. 首先，检查一下自己的代码是否有错误。有时候我们会不小心将autoplay属性的值设置为false，从而导致音频无法自动播放。此时，只需要将其改回true即可。 2. 其次，尝试将autoplay属性与其他属性一起使用。例如，我们可以将autoplay和muted属性同时设置为true，这样即使浏览器禁止自动播放，也不会影响到用户的体验。 3. 另外，我们可以检查一下浏览器的自动播放策略。有些浏览器为了保护用户的体验，会限制网页中的自动播放行为，甚至会默认禁止自动播放。在这种情况下，我们需要进行相应的设置，才能实现自动播放。具体方法可以参考浏览器的相关文档。 4. 最后，如果以上方法都不能解决问题，可以考虑使用JavaScript来实现自动播放。通过JavaScript控制音频文件的播放，可以避免浏览器自动播放策略的限制。 总之，当遇到audio autoplay属性不生效的情况时，我们需要先排查代码问题，检查属性设置是否正确。如果确认没有问题，可以进一步了解浏览器的自动播放策略，尝试进行相应的设置。如果还不能解决问题，可以考虑使用JavaScript来实现自动播放。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值