产品百科 |H5 纯订阅模式下遇到浏览器页面不能自动播放媒体文件怎么办?

简介: 您可以通过阅读本文,了解 H5 纯订阅模式下可能会遇到浏览器页面不能自动播放媒体文件的解决办法。

常见原因

浏览器为了防止网页在用户非自愿的情况下主动播放声音,对网页上的自动播放(Autoplay)功能做了限制:浏览器在没有用户交互操作之前不允许有声音的媒体播放。

受浏览器策略影响,Chrome 70+、Safari、Firefox 等浏览器新版本都不支持带声音的媒体文件自动播放,需要您在网页上手动触发才能播放媒体文件。

解决方法

您可以使用如下两种方法,解决浏览器不能播放媒体文件的问题。

  • 在 onError 中获取到错误码 10201 时,会同时返回播放失败的 userId,此时该用户的音频播放是静音的,在网页上手动触发事件(有用户交互)调用 aliWebrtc.muteAllRemoteAudioPlaying(false) 取消静音。
  • 如果仅有几个人使用浏览器进行播放媒体文件,例如视频直播网站的管理员,建议您可以进行浏览器设置来播放媒体文件。


说明 每次打开浏览器都需要引导用户进行单击操作,而通过浏览器设置可以一次性解决这个域名下所有页面自动播放的问题,您可以参考下文进行浏览器设置(浏览器版本不同,设置方法可能不同,本文的浏览器设置方法仅供参考,具体操作请您以实际为准)。

Chrome 浏览器

您需要访问 Chrome 浏览器的网站设置,然后将声音项改为允许。

  1. 单击浏览器的网站设置image.png
  2. 将声音更改为允许image.png

Safari 浏览器

在 Safari 浏览器的设置中,将自动播放选项改为允许全部自动播放。

  1. 在网址栏单击此网站的设置...image.png
  2. 将自动播放更改为允许全部自动播放image.png

Firefox 浏览器

您可以在保护设置中,将自动播放修改成允许音频和视频。

  1. 在地址栏单击保护设置image.png
  2. 单击自动播放的设置image.png
  3. 更改为允许音频和视频image.png

「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。

image.png

相关文章
|
3月前
|
存储 前端开发 开发者
|
3月前
|
Web App开发 iOS开发 MacOS
如何在浏览器中启用夜间模式?
【10月更文挑战第10天】
|
5月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
300 0
|
2月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
165 2
|
2月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
3月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
59 1
 H5微信外支付(移动端浏览器)
|
2月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
125 1
|
2月前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
4月前
|
JSON 前端开发 JavaScript
java中post请求调用下载文件接口浏览器未弹窗而是返回一堆json,为啥
客户端调接口需要返回另存为弹窗,下载文件,但是遇到的问题是接口调用成功且不报错,浏览器F12查看居然返回一堆json,而没有另存为弹窗; > 正确的效果应该是:接口调用成功且浏览器F12不返回任何json,而是弹窗另存为窗口,直接保存文件即可。
174 2
|
5月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
86 5