HTML audio video标签的autoplay自动播放关闭

已于 2023-05-04 14:48:57 修改
阅读量2k 收藏 1
点赞数 2
文章标签： html 前端
于 2023-05-04 14:48:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingdiango/article/details/130486553
版权

今天在做web开发的时候，使用了audio的html标签来进行音频的播放，发现运行程序后总是自动播放，html代码如下：

<video controls="" autoplay="" name="media">
    source src="xxxx.mp3" type="audio/mpeg">
</video>

运行效果如下：

国内搜索引擎没有查到对应的资料，或者就是资料有问题，不能实现页面加载后自动播放关闭，页面有很多首歌曲，如果全部自动播放就会乱套，因此查询了mozilla官方开发文档<video>: The Video Embed element - HTML: HyperText Markup Language | MDN

那怎么办呢，官方不支持肯定不行，别急往下看，找到如下解释：

 因此我们更改为官方提示的问题解决，audio标签也是类似操作，可参考官方文档

<video controls name="media">
    source src="xxxx.mp3" type="audio/mpeg">
</video>
xingdiango
关注
Audio或video标签 autoplay无效 或 .play()报错问题
Dyaping的博客
04-22 1176
udio或video标签 autoplay无效 或 .play()报错问题
audio或video标签的autoplay属性的说明
cnds123的专栏
12-27 3310
audio或video标签的autoplay属性特别介绍
vue使用audio 音频实现播放与关闭（可用于收到消息给提示音效）
最新发布
高宇辰
07-17 1051
这次项目中因为对接了即时通讯 IM，有个需求就是收到消息需要有个提示音效，所以这里就想到了用HTML5 提供的Audio 标签，用起来也是很方便，首先让产品给你个提示音效，然后你放在项目中，使用Audio 标签，然后引入这段提示音效即可，后续的操作也是我下面的代码，直接复制即可。// 如果你也想在收到消息的时候播放提示音效，在收到消息回调的方法里面执行这个方法（playNotionAudio）即可。// pause()方法只是暂停，这里还需要重新load，然后需要再次play，音乐就可重头播放。
释放 HTML5 <audio> 的力量!
刀刀的专栏
02-14 4821
各种声音构成了我们的生活背景。现在，HTML5 元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成，使多个应用场景得以实现，包括从简单的声音效果到背景音频，再到游戏体验以及更复杂的音频引擎。本博客文章介绍了一些在 Web 应用程序中使用 标签的最佳实践，包括来自真实站点的一些有用的技巧。      在您的页面中添加音频元素         第一
最新在html中实现音乐或视频自动播放
m0_67394360的博客
03-07 7036
由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码 <audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio> 但是效果并不理想，打开了网页并不会自动播放，于是乎，我百度了各种各样的方法，但始终没有实现想要的效果。于是在整理大作业的偶然间，我居然发现了真相！ 首先看原本的代码打开路径,就是一个单纯的网页 mys
对video标签设置不自动播放，隐藏下载功能，禁止右键另存为视频的操作
sunsineq的专栏
10-18 7078
对video标签设置不自动播放，隐藏下载功能，禁止右键另存为视频的操作 在video标签上添加了属性 autoplay=“autoplay” loop=“loop”,然而通过地址栏进去的时候，视频并没有自动播放， 找资料发现，添加 muted 属性，就可以通过地址栏进入网页的时候自动播放了。 <video id="video" src="xxxx/xxx.mp4" autoplay="autoplay" loop="loop" muted="muted" height="10...
HTML中audio标签设置了autoplay网页无法自动播放的解决办法
Seike_113的博客
11-25 5059
这可能是由于浏览器自身的策略限制所导致的。为了更好的用户体验和减少不必要的网络流量，大多数浏览器都会禁止自动播放音频或视频内容。用户必须手动点击播放按钮才能开始播放。此外，一些网站可能需要用户授权才能自动播放媒体内容，因此在网页中设置autoplay属性不一定能够实现自动播放。
html页面audio的autoplay自动播放音乐失败解决方案
qq_30136729的博客
11-22 9218
这几天写了一个网页，想给网页加一个背景音乐，随着页面加载好自动播放，一直实现不了，也没有报错，后来查询资料原来是因为audio设置的autoplay属性，记录一下。 原本 <audio preload autoplay loop id="music"> <source src="/music/bg.mp3" type="audio/mpeg"> </audio> Chrome提示：DOMException: play() failed because the
video 标签无法自动播放
qq_44535402的博客
11-28 2765
video 标签无法自动播放
html5视频自动播放兼容谷歌浏览器,chrome浏览器不支持audio和video标签的autoplay自动播放解决方案...
weixin_35427210的博客
05-31 3946
音频audio和视频video无法自动播放这个在IOS上面一直是个惯例。桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66开始也正式关掉了声音自动播放，也就是说在Safari、Chrome、opera浏览器中音频audio和视频video自动播放功能都将失效。解决方案一在chrome 浏览器中输入：chrome://f...
解决video标签在安卓webview下无法自动播放问题
01-05
在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题，代码如下： 代码如下: mPlayer.setWebViewClient(new ...
移动端audio标签音频自动播放
06-01
移动端audio标签声音（音频）自动播放、暂停、停止、跳转到第几秒播放，可完全兼容苹果ios系统
HTML5 Video/Audio播放本地文件示例介绍
09-28
HTML5 Video/Audio播放本地文件是一种常见的需求，特别是在开发多媒体交互应用时。由于浏览器的安全策略，JavaScript无法直接访问用户的本地文件系统，以防止潜在的隐私泄露风险。然而，通过HTML5引入的一些特性，...
video标签自动播放音视频并绘制波形图
yang1fei2的博客
09-07 2385
video标签想自动播放，需要设置三个可选属性分别是muted、autoplay、controls，muted负责让音视频播放静音，autoplay让音视频自动播放，controls属性负责显示对应的控制菜单。html中的标签可以用来播放常见的音视频格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，当然支持的格式也和浏览器和操作系统有关。如果想要绘制音视频播放过程中的音频波形图，我们需要拦截对应的音频上下文，分析绘制对应的音频数据。// 创建音频上下文。
html5 audio支持语音流播放,H5基础篇--HTML5 audio与video标签实现视频播放，音频播放...
weixin_42173205的博客
05-31 1298
随着互联网的飞速发展以及HTML5的应用，越来越多的项目中用到video，audio当常用标签。 标签属性当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：再如下面： 标签属性下面先介绍下video标签的一般用法video标签的属性如下：注：control 属性供添加播放、暂停和音量控件。一般用法：当然可以暂停，播放该视频，使...
audio标签的自动播放(ios)
weixin_30824277的博客
06-29 391
0.应用场景 前端移动端开发，经常有播放音乐的需求。比如我有公司做过类似支付宝的年度账单，功能是用户在查看年度账单的过程中播放轻音乐。 1.audio标签播放mp3 (一)常用属性和API介绍 1.controls属性 有了它，就会显示控制条。 图1 chrome默认audio样式 图2 ie默认audio样式 图3 firefox默认audio样式 图4 io...
html5中对video设置了autoplay在PC端不能自动播放，移动端也不行，解决方法
weixin_42178670的博客
04-28 1686
pc端解决办法： 加上muted属性，pc端即可正常播放 移动端解决方法： 移动端本身是不能自动播放的，可以设置用户有交互动作（并不局限于点击播放视频）之后自动播放（audio的操作方法同理于video） let video = document.getElementsByTagName("video") // 只要找到video元素即可 // 如果有多个视频,执行for这个代码 for(let v of video){ v.play() } // 如果只有一个视频，执行下面一行代码 video[0].
audio autoplay
weixin_42371145的博客
12-13 722
ps：自动播放需要写成“autoplay”，chrome浏览器才会识别。 需要三个格式的音频，在不同浏览器下兼容性不同。--------待确认 <audio preload="auto" autoplay loop="loop" id="bg-music"> <source src="../../assets/bei.ogg" type="audio/ogg"> ...
关闭自动播放功能
zcc1414的专栏
12-03 1149
1 关闭服务  Shell Hardware Detection   停止-》已禁用 2 CMD->gpedit.msc   -> 可防止  U盘 病毒
谷歌浏览器video标签自动播放
08-14
回答: 谷歌浏览器的video标签自动播放的问题可以通过在video标签中添加autoplay属性来实现。比如，可以在video标签中添加autoplay属性，像这样: <video autoplay> <source src="video.mp4" type="video/mp4"> </video> 这样，在加载页面时，视频会自动播放。如果希望自动播放的同时静音，可以添加muted属性，像这样: <video autoplay muted> <source src="video.mp4" type="video/mp4"> </video> [2这样，视频会自动播放且没有声音。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [谷歌浏览器不支持audio和video标签自动播放](https://blog.csdn.net/tyf97/article/details/84238456)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [video标签设置了autoplay，自带音频的视频在谷歌浏览器仍无法自动播放](https://blog.csdn.net/EchoLiner/article/details/129565294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [谷歌浏览器audio标签自动播放音乐问题解决](https://blog.csdn.net/a545132569/article/details/82996445)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xingdiango

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值