微信小程序> 微信小程序:webview嵌套的h5页面退出后音频没有停止播放的解决方法

微信小程序:webview嵌套的h5页面退出后音频没有停止播放的解决方法

浏览量:433 时间: 来源:落雨满天情

微信小程序的web-view可以嵌套h5页面,h5内容可以在小程序上展示。

<web-view src="{{url}}?isLogin={{isLogin}}&id={{id}}&userId={{userId}}></web-view>

传参方式如上
碰到的问题是:当进入到H5页面时,会播放音乐,当返回到小程序或者退出小程序后,在微信聊天界面音频还在继续播放,直到音频播放完毕,这对用户的体验的非常不好。刚开始的做法是在嵌套h5的页面里用onUnload将src中的url设置为空,但是在安卓机上可行,ios上依然在播放,真的是很苦恼,又继续找方法。
直到后面看到了阮一峰的一篇文章(http://web.jobbole.com/95344/)解决了问题

document.addEventListener('visibilitychange', function () {  // 用户离开了当前页面  if (document.visibilityState === 'hidden') {    document.title = '页面不可见';var music = document.getElementById("play");music.pause();//暂停  }   // 用户打开或回到页面  if (document.visibilityState === 'visible') {    document.title = '页面可见';var music = document.getElementById("play");music.play();//播放  }});

监听网页的可见与不可见,网页不可见时暂停播放,可见时播放。非常感谢阮一峰的分享,这个问题着实排查了很久。

微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎