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

在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中关上仍然无奈获取的问题

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理