摘要:之前在做小程序的时候遇到一个问题小程序中有一个页面,这个页面中用嵌套了一个页面,这个页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。
之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。
预期效果:点击小程序退出后背景音乐停止播放,再次打开小程序后背景音乐继续播放,如果用户停止了音乐,退出再次打开时背景音乐仍然是停止状态
思路过程:因为H5页面是嵌套的,音乐在H5页面中,无法通过小程序的生命周期去控制音乐的播放状态,所以如何能在H5页面中监听页面的显隐藏状态去控制音乐
visibilitychange:浏览器标签页被隐藏或显示的时候会触发
适用场景:
浏览器标签页切换时触发
微信环境下切成浮窗状态触发
小程序嵌套页面,小程序切换页面或进入后台触发
其他页面显隐切换时触发
解决方案:
let statusBeforeHide = true; // 记录页面切换到后台时音乐的播放状态,如果用户进行了音乐关闭操作,则将该状态置为false // document.hidden boolean 页面当前是否不可见 let hiddenProperty = ("hidden" in document) ? "hidden" : ("webkitHidden" in document) ? "webkitHidden" : ("mozHidden" in document) ? "mozHidden" : null; if (hiddenProperty) { let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, "visibilitychange"); let onVisibilityChange = () => { console.log("visibilityChange"); changePlay(); }; document.addEventListener(visibilityChangeEvent, onVisibilityChange); } else { console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); } // 更改音乐播放状态 function changePlay() { if (document[hiddenProperty]) { // 页面隐藏 if (statusBeforeHide) { music.pause(); // 伪代码,音乐暂停,但不改变statusBeforeHide } } else { // 页面显示 if (statusBeforeHide) { music.play() // 伪代码,如果statusBeforeHide是true,音乐继续播放 } } }
拓展:
1.可在页面后台运行时清掉一些定时器,页面显示时再重新设置定时器,节省性能
作者:易企秀——sunny
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106520.html
摘要:之前在做小程序的时候遇到一个问题小程序中有一个页面,这个页面中用嵌套了一个页面,这个页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。 之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。 预期效果...
摘要:定义文档资源的名称二域名解析在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过地址。什么是域名解析协议提供通过域名查找地址,或逆向从地址反查域名的服务。 前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解!本文首发地址为GitHub博客,写文章不易,请多多支...
摘要:定义文档资源的名称二域名解析在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过地址。什么是域名解析协议提供通过域名查找地址,或逆向从地址反查域名的服务。 前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解!本文首发地址为GitHub博客,写文章不易,请多多支...
摘要:对微信小程序进行全局配置,决定页面文件的路径窗口表现设置网络超时时间设置多等。 微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档 认真跟着文档看一遍,相信有vue前端经验的看下应该就能上手了,然后安装 微信小程序开发者工具 新建一个quick start项目,了解代码结构,...
阅读 3643·2021-09-07 09:59
阅读 699·2019-08-29 15:12
阅读 788·2019-08-29 11:14
阅读 1285·2019-08-26 13:27
阅读 2631·2019-08-26 10:38
阅读 3104·2019-08-23 18:07
阅读 1253·2019-08-23 14:40
阅读 1881·2019-08-23 12:38