解决苹果Safari 浏览器下html不能自动播放声音和视频的问题-实时语音通话功能【唯一客服】
在实现我的客服系统中,实时语音通话功能的时候,如果想自动播放音视频流,在苹果设备上遇到了问题。
苹果浏览器(Safari)在默认情况下不允许声音在背景里自动播放。这是出于用户体验和隐私方面的考虑,避免在用户没有意识到的情况下自动播放声音。
解决办法是
iOS 11 及以上版本的 Safari 浏览器。当用户已经有过至少一次交互以后,可以设置下面两个属性,muted
和 playsinline
属性。然后动态js设置一下,就能自动播放声音了
<audio id="myAudio" src="audio.mp3" muted playsinline></audio>
然后在js里动态设置一下属性
var myAudio = document.getElementById('myAudio'); myAudio.muted = false; // 将 muted 属性设置为 false myAudio.autoplay = true; // 将 autoplay 属性设置为 true myAudio.play(); // 播放音频
这样
在页面至少有过交互以后,可以让苹果设备上自动播放声音了
十年开发经验程序员,离职全心创业中,历时三年开发出的产品《唯一客服系统》
一款基于Golang+Vue开发的在线客服系统,软件著作权编号:2021SR1462600。一套可私有化部署的网站在线客服系统,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。
开源地址:唯一客服(开源学习版)
官网地址:唯一客服官网
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2021-03-09 [Go]Golang中控制并发的sync包
2021-03-09 [日常]GB2312 GBK GB18030的区别和演进过程
2020-03-09 [PHP] fastcgi_split_path_info与传递PATH_INFO
2019-03-09 [MySQL] explain中的using where和using index
2019-03-09 [Linux] awk基础编程
2018-03-09 [日常] crontab的秒执行和串行化和多进程实现
2016-03-09 [nodejs] nodejs开发个人博客(四)数据模型