关于前端:IOS环境下微信H5页面audio无法触发canplay的解决办法

37次阅读

共计 981 个字符,预计需要花费 3 分钟才能阅读完成。

在 H5 页面中应用 audio 标签后,canplay 办法在安卓和浏览器中失常,然而 ios 的微信环境中无奈触发
起因:

In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled. No data is loaded until the user initiates it.
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not
大略意思就是:苹果禁止了 Autoplay 和 JS "onload" 加载播放。

解决办法:

mounted() 
  if(this.isiOS){his.allPlay()   
  }
},
allPlay(){
        let _that = this
        _that.allAudioObj = document.getElementById('audiotempAll')
        if(typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function'){WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
            // 在这里拿到 e.err_msg, 这外面就蕴含了所有的网络类型
            // alert(res.err_msg);
            _that.audioObj.load()
            _that.allAudioObj.load();
            console.log(_that.allAudioObj.duration)
          });
        }else{console.log('非微信环境')
        }
      },

思路:

监听微信外部的 weixinJSBridgeReady 触发对音频的操作

然而这个只能解决微信外部关上 H5,并不解决 safari 中关上仍然无奈获取的问题

正文完
 0