您好,欢迎来到汇智旅游网。
搜索
您的当前位置:首页微信小程序:web-view嵌套的h5页面退出后音频没有停止播放的解决方法

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

来源:汇智旅游网

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

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

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

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();//播放
  }
});

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- hzar.cn 版权所有 赣ICP备2024042791号-5

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务