Chrome 66之后禁止网页声音自动播放问题解决

1.问题描述

我们给客户做的一个网页大屏，有报警音效的功能，当用户触发报警条件时，在大屏播放报警音效。但是，由于谷歌浏览器在66版本后禁止网页声音自动播放，必须用户在与网页有交互之后才允许播放声音，否则当调用play方法播放音频时，会有如下错误：

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

所以，用户起码要点击一下网页，才可以声音自动播放

2.解决1

上面讲了原因，针对我们的情况，大屏用户设备固定，设备量少，但是网页的开关刷新频率会比较高，要求用户每次加载页面之后去点击一下页面显得不太人性化。

所以考虑直接设置Chrome浏览器的声音权限。步骤如下：

【设置】->【搜索声音】->【点击网站设置】

在更多内容设置中，点击【声音：允许网站播放声音】，在里面加入我们的站点，就可以是实现无需用户操作的音频自动播放了

3.解决2

上面的方法对于我们这种少量用户来说，我们可以在实施时帮用户进行操作，但是用户量大时，就不可行了，所以就需要在页面加载完成后，刻意设计一些和用户的交互操作，达到可以自动播放音频的效果。

Chrome 66之后禁止网页声音自动播放问题解决相关推荐

怎么让优酷视频在网页中自动播放方法
优酷视频在网页中自动播放: 方法一 1．首先在优酷复制得到欲贴视频的代码, <embed src="http://player.youku.com/player.php/sid/XMz ...
vue, H5 浏览器播放器video 嵌入APP(andriod，IOS) 首次有声音自动播放处理
浏览器播放器首次有声音播放 Uncaught (in promise) DOMException: play() failed because the user didn't interact wit ...
chrome谷歌浏览器如何让网站可以自动播放音乐
众所周知,谷歌浏览器在18年开始禁止网页自动播放音乐和视频,除非是静音播放;但是需求又需要我们当在一个合适的时机去播放声音,这就比较麻烦了; 第一步,浏览器-设置页面-搜索"网站设置&quo ...
网页不能自动播放视频、音频的解决方案
至于原因,就是谷歌以及基于 Chromium 开发的浏览器自身限制,出发点是影响用户体验,想想也是,万一,一不小心点开哪个网页,突然播放一些乱七八糟的声音,而且特别大声,估计谁也受不了. 考虑到目前地 ...
EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的网页H5自动播放方案
我们很多安防.互联网.直播的应用场景中,在打开一路直播流后,极少看到需要点击播放按钮才能直播播放视频流的情况,但是由于H5场景的播放需要兼容的浏览器非常多,这样的情况下经常会遇到各种各样的摄像机网页 ...
集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题,比如:不懂前端的js代码.没有公网服务器放置这些js脚本和网页.微信对接入IP ...
移动端H5页面在微信浏览器内audio无法自动播放问题解决
相信许多小伙伴都遇见过这话种情况,在微信浏览器内添加的audio 无法自动播放之前写过好多那种活动页添加的背景音乐都可以自动播放,直到后来ios 增加了限制就出现了这个问题怎么解决的只需给audi ...
Ubuntu16.04无声音问题解决及网页视频无法播放问题解决
最新解决方案: sudo apt-get remove --purge alsa-base pulseaudio sudo apt-get install alsa-base pulseaudio p ...
Chrome插件开发--后台监控网页并自动刷新，点击页面元素
2015年6.17号,在线旅游网站蚂蜂窝出现了抢粽子活动:页面会出现一些粽子,点击粽子,即抢到.很明显,这是一个重复性的劳动,可以代码自动刷新页面,点击页面上的粽子. 本方案中选择了开发一款Chrom ...

Chrome 66之后禁止网页声音自动播放问题解决

1.问题描述

2.解决1

3.解决2

Chrome 66之后禁止网页声音自动播放问题解决相关推荐

最新文章

热门文章