怎么让HTML5 中视频和音频自动播放而不静音

最新推荐文章于 2023-12-26 20:56:26 发布
最新推荐文章于 2023-12-26 20:56:26 发布
阅读量1.4w 收藏 6
点赞数 4
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Re_The_W/article/details/105301363
版权

video和audio无法自动播放的问题

很多前辈说加上muted (静音)就可以自动播放

muted 加入之后确实会自动播放，但放视频和音乐没声音太坑了！

解决方法：权限问题！！！ 从设置中开通浏览器的音频权限，点击允许就OK了。
如果单个网址打不开权限，那就直接设置允许全部的网址自动播放音频。
这可能就是为什么muted能让实现autoplay的原因。

Re_The_W
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
react-music-player：React，TS的音乐播放插件，歌词同步功能，适配PC和移动端；一个带有React和Typescript的音乐播放器，可用于手机和PC
02-06
</ s> </ s> </ s> React很酷的音乐播放器 自适应音频播放组件，适用于PC和移动设备。 所有图标和文本都是可定制的。 主题颜色可以修改。 支持歌词的同步滚动。 | 功能 适用于PC和移动设备。 在移动设备上支持播放详细信息页面的弹出窗口。 播放控制 上一首，下一首 暂停 滚动或单击歌曲的进度条以实现音乐的快进和快退。 滚动歌词以定位播放位置，并实现快进和快退功能。 播放，删除播放列表中的音乐，并突出显示当前正在播放的音乐。 音量控制 拖动，单击音量控制栏以控制音量。 单击音量图标以切换静音状态。 状态显示 封面图片在播放音乐时旋转，在音乐暂停时停止旋转。 显
chrome和edge浏览器，实现视频不静音自动播放
zhulong16的博客
02-27 6135
解决chorme和edge浏览器无法自动播放音视频的问题
解决google浏览器无法自动播放音视频问题
WanweI897的博客
10-14 5885
浏览器报错：Unmuting failed and the element was paused instead because the user didn’t interact with the document before 或 Uncaught (in promise) DOMException。 由于google的一些制度，我们在写html5项目时会发现刷新页面时无法自动播放audio和video，即使你添加了autoplay属性也无济于事，下面提供两种解决方案。 方案一：解铃还须系铃人 googl
在谷歌浏览器中使用JavaScript实现MP3自动播放
最新发布
Python私教
12-26 759
解决方案的原文请参考：https://blog.csdn.net/qq_41764462/article/details/111135774。今天给一个客户实现页面自动播放音乐的功能，一开始以为很简单，不过后来才发现，随着谷歌浏览器的升级，自动播放的功能已经被禁用了。大家可以参考这篇文章：https://developer.chrome.com/blog/autoplay?这个代码实测是没有什么问题的，点击界面上任何一个地方以后，音乐开始自动播放。不过，在经过一番搜索之后，终于找到了比较合适的解决方案。
Laravel开发-muted-log
08-27
Laravel开发-muted-log 提供“静音”日志编写器。主要目的是记录异常，而不在堆栈跟踪中包含参数。
shikwasa:为播客而生的音频播放器
04-30
关于 Shikwasa是为播客而生的网络音频播放器。 如果您厌倦了使用音乐播放器替代播放播客，那么您来对地方了。 说不球员甚至不支持播客共同的特点！ :rocket: 超轻量 :hatching_chick: 无依赖 :clapper_board: 播客章节 :racing_car: 播放速度控制 :video_game: 向前/向后跳过 :glasses: 辅助功能意识 :crescent_moon: 暗模式 :radio: 音频流支持 :laptop: 兼容SSR 将访问者直接定向到订阅页面 播放清单 :open_book: 目录 选项 声音的 容器 固定的 themeColor 主题 自动播放 静音 预载 speedOptions 下载 大事记 风格 章节插件 路线图 这个项目的怪异名字怎么办？ 执照 安装 npm install shikwasa 也可以在CDN上找到： https ： //www.jsdelivr.com/package/npm/shikwasa 用法 包括样式表和脚本 < head > < link re
有关HTML5中背景音乐的自动播放功能
09-27
主要介绍了有关HTML5中背景音乐的自动播放功能的相关资料,需要的朋友可以参考下
HTML5播放视频autoplay不起作用-HTML5视频不自动播放
weisico.com的博客
04-08 6088
初学HTML5视频播放的同学，可能大多数都会遇到这样一个问题：按照教程写的代码，添加了autoplay属性，为什么视频还是无法自动播放？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5视频自动播放</title> </head> <body> <video width="320" height="240" contro
HTML5选择音频自动播放样式
weixin_30699831的博客
08-04 197
昨天编写了HTML5的音频播放样式，今天编写一个特别简单的音频播放样式，选择文件后自动播放： <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选择音频自动播放</title></head><body&g...
html5如何设置视频为静音,html5中设置或返回音频/视频是否应该被静音的属性muted-...
weixin_39603622的博客
06-17 2335
实例关闭视频的声音：myVid=document.getElementById("video1");myVid.muted=true;定义和用法muted 属性设置或返回音频/视频是否应该被静音(关闭声音)。浏览器支持所有主流浏览器都支持 muted 属性。注释：Internet Explorer 8 或更早的浏览器不支持该属性。语法设置 muted 属性：audio|video.muted=tr...
html5如何设置静音,如何取消静音HTML5视频有一个静音道具
weixin_32760485的博客
06-19 1241
我创建了一个简单的视频块与静音(移动自动启动)，但现在我不能改变静音状态...如何取消静音HTML5视频有一个静音道具我用repository，小提琴链接会很好。到目前为止，我没有运气尝试这样做。HTML'JS$(document).on("click",".containerVolume",function(e){if(isMuted){$('video').prop('muted', fals...
TS3 MutedMoron Plugin:静音时提醒白痴取消静音-开源
07-11
该工具不会播放烦人的 *哔声* 声音，而是在屏幕上显示透明通知。 安装：将 DLL 和 PNG 文件直接移动到您的 teampeak 插件文件夹中。 确保下载正确的位版本（32 位为 32 位 teampeak 等）
audio-player:音频播放器的实用Javascript项目
05-23
:construction: 音频播放器 :rocket: :construction:正在施工:construction:... :construction: :laptop: 关于该项目 :recycling_symbol: 音频播放器 自定义音频播放器 带有音频和图像 :artist_palette: 布局 简单的 启动布局结构（HTML和CSS）。 创建音频播放器 窗口打开时自动使播放器播放 好的，我很后悔，自动播放的播放器太恐怖了。 删除此自动播放选项 向播放器提供音频数据 缓和 重构：创建一个对象以保存播放器的状态，功能和设置 音频结束后，开始列表中的下一个 当您到达最后一个音频时，请再次播放第一个。 难的 开始可视化播放器定制 向按钮添加功能（播放/暂停，音量，静音和搜索栏） 网络-v1.0 :hammer_and_wrench: 技术 在项目建设中使用了以下工具： ：定位，缩放等 ：结构和效果 现在时代 我可以用吗 实现CSS 材质图标 :rocket: 如何运行项目 我们可以认为这个项目只有一部分： 前端 先决条件
unmute:在ios静音开关打开的情况下启用网络音频播放
05-03
unmute.js 在ios静音开关打开的情况下启用网络音频播放 取消静音是一个令人作呕的技术，它可以帮助您。 在用户交互时自动恢复Web音频上下文 仅限ios：网络音频在媒体频道而不是铃声频道上播放 仅限ios：禁用媒体播放小部件和airplay。 页面隐藏后自动暂停并恢复网络音频。 自动恢复通过检查上下文状态并在任何可恢复事件期间调用resume来工作。 媒体频道播放和媒体小部件通过在后台播放禁止播放的无声html音频轨道来禁用工作。 页面可见性api和模糊事件均支持隐藏页面时的自动暂停，因为ios对页面可见性api的实现不佳。 这一切真的很糟糕，Apple应该真正修复其垃圾浏览器。 这段代码没有以任何方式进行优化，只是为了帮助某人避免堆栈溢出而进行了优化，仅作为示例。 享受这个骇人听闻的技巧。 如果喜欢的话，欢迎您给我买杯咖啡:) 演示版 参见： : 在您喜欢的
poem-mute:带有事件发射器的静音按钮
06-25
#poem-静音 用于可视化的简单静音按钮。 它使用 localforage 来存储最后一个已知的静音状态。 模块系列的一部分。 用法： var createMuteButton = require('poem-mute'); var mute = createMuteButton({ muted : false, // start muted or not keyCode : 83 // keycode to mute, default is "S" }); 界面 mute.muted()函数 获取或设置静音状态。 // Mute mute.muted( true ); // Un-mute mute.muted( false ); console.log( mute.muted() ); // > false mute.toggle()函数 切换静音状态 mute
html网页添加音乐视频的实现示例
12-28
支持firefox自动播放 谷歌、ie不支持自动播放 <video controls=controls autoplay=autoplay name=media><source src=./img/music.mp3 type=audio/mpeg></video> 谷歌可以通过添加 muted 通过静音来...
unmute:Chrome浏览器自动播放的用户界面政策
05-18
提供UI以恢复由于新的自动播放策略而暂停的音频上下文和音频元素 使用方法（目前） 获取代码（克隆存储库或下载源代码） 前往chrome：// extensions / 启用开发人员模式（右上角） 单击“加载未打包” 浏览到...
html5y音频自动播放,HTML5之音频audio知识（部分vedio）
weixin_42261068的博客
05-30 340
HTML总结(二)【HTML5之音频】HTML5重点知识之音频audio标签兼容性：InternetExplorer9+,Firefox,Opera,Chrome以及Safari支持标签。注释：InternetExplorer8以及更早的版本不支持标签。audio的常用属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放cont...
html5添加视频为背景自动播放
08-20 3384
客户想做个打开官网自动播放一段视频，楼主使用了video标签，即下面的代码：： 于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop” 然而通过地址栏进去的时候，视频并没有自动播放，按一下F5才会自动播放 最后，找资料发现，添加 muted 属性，就可以通过地址栏进入网页的时候自动播放了。 <video src="htt...
如何让video自动播放音频
05-12
在HTML5中，可以使用`<video>`标签来嵌入视频，并使用`autoplay`属性使其自动播放。要让视频自动播放音频，可以添加`muted`属性来禁用视频的音频，并使用JavaScript代码在视频播放时取消静音。以下是示例代码： ```html <video autoplay muted> <source src="video.mp4" type="video/mp4"> </video> <script> var video = document.querySelector('video'); video.addEventListener('play', function() { video.muted = false; }); </script> ``` 在上面的示例中，`autoplay`属性使视频自动播放，`muted`属性禁用了视频的音频。在JavaScript代码中，我们添加了一个事件监听器来侦听视频播放事件，并在视频开始播放时取消静音。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值