微信web H5 安卓无法播放的解决方案

发现问题：

H5页面在微信内置浏览器播放的时候会发现，部分安卓机型不在支持音乐自动播放，与视频一样，需要人为触发后才能使用。

为此，微信社区给出了答案：

Android微信内网页音频自动播放能力调整 | 微信开放社区

但甲方不愿意接受，这就很难受了，作为友军我们只能一边安慰，一边找解决方案。

分析问题：

出现这种情况，就要从代码源头去分析了，早期我们让手机自动播放，我们的代码如下：

引入微信js(jweixin)后：

wx.ready(function(){var globalAudio=document.getElementById("mp3");globalAudio.play();})function onBridgeReady() {WeixinJSBridge.call('hideOptionMenu');}if (typeof WeixinJSBridge == "undefined") {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}} else {onBridgeReady();}

这样就能实现音乐自动播放了，但不巧，这次情况又不一样了，好尴尬呢。

解决问题：

好在有度娘，可以搜索到解决方案，可以参考参考：

有一种方案叫做：web vedio api

更详细的可以查看：

Web Audio API - Web APIs | MDN

快上码~

  /*** @author ccbbs* @file 解决安卓webview自动播放背景音乐的问题*/function BGMAutoPlayMgr/* solveAndroidBGMAutoplay */(url) {this.audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();this.sourceNode = null;this.buffer = null;this.isPlayingBGM = false;this.toggleBGM = function () {if (typeof this.sourceNode == 'object') {if (this.isPlayingBGM) {this.sourceNode.stop();this.isPlayingBGM = false;} else this._playSourceNode();}}this._playSourceNode = function () {const audioContext = this.audioContext;audioContext.resume();const _sourceNode = audioContext.createBufferSource();_sourceNode.buffer = this.buffer;_sourceNode.loop = true;_sourceNode.connect(audioContext.destination);_sourceNode.start(0);this.sourceNode = _sourceNode;this.isPlayingBGM = true;}let loadAndAutoPlay = (audioUrl) => {const audioContext = this.audioContext;const xhr = new XMLHttpRequest();xhr.open('GET', audioUrl, true);xhr.responseType = 'arraybuffer';xhr.onreadystatechange = () => {if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {audioContext.decodeAudioData(xhr.response, buffer => {this.buffer = buffer;WeixinJSBridge.invoke("getNetworkType", {}, () => this._playSourceNode());});}}xhr.send();}loadAndAutoPlay(url);loadAndAutoPlay = null;}const bgm = new BGMAutoPlayMgr('http://sy.lamalego.com/epiboly/earth/static/m.mp3');setTimeout(function () {if (CheckIsAndroid()) {//如果是Androidbgm.toggleBGM();}},500)

也贴一下判断是否为安卓机型：

function CheckIsAndroid() {var browser = {versions: function () {var u = navigator.userAgent, app = navigator.appVersion;return { //移动终端浏览器版本信息ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 //u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器iPad: u.indexOf('iPad') > -1, //是否iPad};}(),}//if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {//    return false;//}if (browser.versions.android)return true;return false;}

根据自己需要去优化吧，散会！

微信web H5 安卓无法播放的解决方案相关推荐

微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
微信中H5同层Video播放器接入教程
微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器通过video属性"x5-video-player-type"声明启用同层H5 ...
video标签android全屏,视频video标签在移动端微信中默认全屏播放的解决方案
最近后盾人移动端上线了,开发挺顺利,但也遇到几个小坑. 后盾人中的视频是用video视频标签引入的,当在微信中打开后盾人,播放视频的时候,视频默认会全屏播放. 安卓和ios下都存在此问题,解决方法如下 ...
解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
H5微信端在IOS上不能播放音乐解决方案
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的.直到微信火爆 ...
SkeyeVSS实现监控摄像头进行网页WEB和微信、手机无插件直播点播解决方案
SkeyeVSS系统介绍 SkeyeVSS是一个基于Web无插件直播点播的视频云综合监控管理系统: 支持 WEB 页面配置管理; 支持组织机构管理; 支持设备或平台通过GB/T28181协议接入; 支 ...
Windows PC、 Linux、 Android、 iOS多平台支持H5无插件播放RTSP摄像机解决方案
Windows PC. Linux. Android. iOS多平台支持H5无插件播放RTSP摄像机解决方案需求分析视频流媒体监控行业已经进入互联网时代,浏览器承载了绝大多数的互联网访问流量,目前 ...
安卓音乐播放时微信视频微信语音电话进来音乐暂停播放
最近项目中遇到一个问题,app内音乐后台播放时,如果有电话或者微信视频通话进来,app后台音乐还在播放.这样就造成用户体验不好,研究了市面上的音乐播放器,比如网易云音乐就很好的做到了如果有微信视频或者 ...
【H5】html5 video 在微信浏览器视频不能自动播放！
html5 video在安卓微信浏览器视频不能自动播放 ! html5 video在安卓微信浏览器视频不能自动播放 ! html5 video在安卓微信浏览器视频不能自动播放 ! 注:重要的事情说三遍 ...

微信web H5 安卓无法播放的解决方案

微信web H5 安卓无法播放的解决方案相关推荐

最新文章

热门文章