不同浏览器下自动播放限制策略及解决方法PC端浏览器限制策略及解决方法使用Mac测试PC端浏览器包括Chrome浏览器Safari浏览器Firefox浏览器Chrome浏览器Chrome-限制政策内容参考自https://developers.google.com...https://github.com/gnipbao/ib...2018年4月发布的Chrome66正式关闭声音自动播放始终允许静音自动播放。允许在以下情况下自动播放声音：用户与字段进行了交互（单击、点击等）。在桌面设备上，用户的媒体参与指数(MEI)阈值已被超过，这意味着用户之前播放过有声视频。在移动设备上，用户已将该站点添加到主屏幕。顶部框架可以向其iframe授予自动播放权限以允许自动播放声音。MEI是一个评价用户对当前站点的媒体参与度的指标，它取决于-用户在媒体上停留时间超过7秒-音频必须显示且不能静音-与视频有过互动-媒体不小于200x140。Chrome-解决方法1.不要假设视频会播放，也不要在视频实际未播放时显示暂停按钮。2.根据promise结果判断当前媒体是否支持自动播放varpromise=document.querySelector("video").play();if(promise!==undefined){promise.catch(error=>{//自动播放被阻止//显示一个UI元素让用户手动开始播放}).then(()=>{//自动播放开始});}3.如果不支持，有3个选项，(1）静音自动播放，（2）或选择弹出对话框引导用户产生交互，并在事件回调中调用play()（3）改进Chrome浏览器Safari的MEI索引限制策略和Safari浏览器的应对措施参考https://webkit.org/blog/7734/...Safari使用自动推理引擎来屏蔽绝大多数网站默认自动播放的媒体元素。Safari11允许用户通过“本网站的设置”选项来控制哪些网站可以自动播放音视频。1、判断当前媒体是否支持自动播放。允许自动播放】弹出对话框引导用户产生交互，在事件回调中调用play()静音自动播放示例：弹出对话框引导用户产生交互示例：引导用户设置浏览器设置[允许自动播放]例：火狐浏览器个人测试结果是火狐浏览器支持自动播放。手机浏览器的限制策略与对策。安卓手机测试的浏览器如下火狐/QQ浏览器/钉钉微信ChromeSafariUC浏览器火狐/QQ浏览器/钉钉使用视频自动播放微信的限制策略及对策微信需要使用API??WeixinJSBridge，内置JS微信内置浏览器中的对象，这个内置的JS对象就是WeixinJSBridge。WeixinJSBridge不是一打开WebView就可用的。客户端需要初始化这个对象。当对象就绪后，客户端会抛出“WeixinJSBridgeReady”事件。所以在调用WeixinJSBridge相关的API时，需要判断WeixinJSBridge是否存在。//监听WeixinJSBridge是否存在if(typeofWeixinJSBridge=="object"&&typeofWeixinJSBridge.invoke=="function"){vedio.play();}else{//监听客户端抛出的WeixinJSBridgeReady事件}elseif(document.attachEvent){document.attachEvent("WeixinJSBridgeReady",function(){vedio.play();});document.attachEvent("onWeixinJSBridgeReady",function(){vedio.play();});}}move客户端Chrome的限制和解决方案muted可以自动静音播放引导用户进行交互可以播放高MEI值的网站和自动播放手机Safari限制和解决方案muted可以自动静音播放引导用户进行交互做一个交互可以播放引导用户设置浏览器为【允许自动播放】移动端UC浏览器限制及解决办法静音模式不能自动播放弹出对话框引导用户做一个可以播放音频的交互限制策略及解决方法参考资料https://segmentfault.com/a/11...Audio元素原生播放音频。除了使用audio标签外，还有一个API叫做AudioContext，AaudioContext接口表示由音频模块连接的音频处理图。每个模块对应一个AudioNodeAudioContext，可以控制它包含的节点的创建，以及音频处理和解码操作的执行。在做任何事情之前创建一个AudioContext对象，因为一切都发生在这个环境中。AudioContext首先请求音频文件播放声音，放到ArrayBuffer中，然后使用AudioContextAPI解码解码，解码后让它播放。functionrequest(url){returnnewPromise(resolve=>{letxhr=newXMLHttpRequest();xhr.open('GET',url);//设置响应类型arraybufferxhr.responseType='arraybuffer';xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){resolve(xhr.response);}};xhr.send();});}实例化AudioContext//Safari是使用webkit前缀letcontext=new(window.AudioContext||window.webkitAudioContext)();解码播放函数play(context,decodeBuffer){letsource=context.createBufferSource();source.buffer=decodeBuffer;source.connect(context.destination);//从0开始播放source.start(0);}//请求音频数据letaudioMedia=awaitrequest(url);//解码和播放
