监测页面是否切换到后台

最新推荐文章于 2023-12-11 13:22:07 发布
最新推荐文章于 2023-12-11 13:22:07 发布
阅读量7.1k 收藏 3
点赞数 2
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gg451516921/article/details/79133029
版权
本文介绍了在视频网站开发中如何通过监听页面活动状态来实现在用户切换到后台时自动暂停视频播放的功能。通过特定的浏览器属性，可以有效地检测到页面是否处于前台或后台，从而控制视频播放。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做一个视频网站的时候遇到了一个需求，要求当用户切换到其他操作的时候，暂停播放。

因为我在网上参考了一下其他大神后，自己写了一个小demo，但是大概功能已经可以实现了。

要实现这个功能主要靠两个属性：

1.document.hidden（Boolean值，表示当前页面可见还是不可见）
2.document.visibilityState（返回当前页面的可见状态。分为"hidden"跟"
最低0.47元/天 解锁文章
关于微信小程序定位：小程序切换到后台后不再执行获取实时位置的问题
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-15 398
通过测试，我发现的定位功能虽然在前台和小程序内部页面切换时表现良好，但并不适合对实时性要求高的物流场景。微信切换到后台后，定位逻辑并非真正持续运行，而是被暂停并缓存。如果预算有限且实时性要求不高，利用微信小程序的缓存数据结合定时任务，是一种可行的妥协方案。如果预算允许且业务需要强实时性，建议开发独立 APP，同时结合服务端进行数据校正和推送。希望这篇文章能为遇到类似问题的开发者提供一些思路。如果你有更好的解决办法，欢迎评论分享，我们一起探讨。
快应用开发技巧之判断退到后台篇
快应用官方博客
03-24 1089
来源：快应用官方论坛 作者：zephyrtune 最近碰到一些开发者在咨询：快应用“如何判断退到后台”的问题。正好之前在写功能的时候，也遇到过这个问题，我觉得可以和大家分享下我的经验。 解决这个问题的时候，确实费了我不少脑细胞。作为一个已入坑的老人，想对新入坑的开发者说一句：不入不知坑深，一入一坑到底！ 玩笑归玩笑，问题归问题，需求还是要解决的。 目录： ...
前端检测窗口是否被后台
如果有了可惜
08-17 614
当用户长时间后台页面时，再切回来有些场景是需要刷新页面的，比如判断 token 失效， 比如后台视频播放暂停或静音，前台视频自动播放或打开音量 document.addEventListener("visibilitychange", () => { if(document.visibilityState=="visible"){ alert("欢迎回来"); // 播放视频 } else { console.log("不要走！") // 暂停视频播放 }
Vue 前后端对接时判断是否与后端连接成功
Happyaileaf的博客
10-03 4615
Vue前后端对接时判断是否与后端连接成功使用 axios API连接成功连接失败 使用 axios API 可以通过向 axios 传递相关配置来创建请求，再根据axios接收的数据判断是否连接成功。 进入Vue项目，在 main.js 文件中加入以下新增的代码，可以在网页刷新的时候发送请求，在控制台打印出相关的数据。 // The Vue build version to load with t...
vue页面监听是否置为后台或可见状态
钢铁之家
05-15 1655
这里写自定义目录标题使用场景推荐插件使用方式安装全局使用局部使用 使用场景 微信公众号网页中使用了弹幕，当微信在后台时，停止弹幕程序的执行 页面有定时任务执行时，除了退出页面要停止外，当页面在后台时，也可以清除定时任务，当可见时，再重新启动 推荐插件 vue-visibility-change 使用方式 安装 npm i vue-visibility-change 全局使用 import Vue from 'vue' import visibility from 'vue-visibility-cha
如何判断玩家挂机，切后台，长时间无操作
shrimpV的博客
12-11 653
1.最简单可行的方式就是监听玩家的输入（包括按钮事件，滚轮事件，文本框事件，遥杆移动事件）以及屏幕的触碰，如果玩家在一段时间内都没有这些操作，那就说明玩家在挂机。导出UI模板：UIScriptHeader_Template 需放在项目根目录上，导出UI的时候会用到它去自动广播出玩家的输入事件。单脚本文件：onHookCheck.ts 随便挂在一个双端或者单端物体上都行。2.玩家后台的切出和切回编辑器都是有回调。事件，可自行监听后做对应的处理。
Windows 8 应用程序前后台切换事件监听
weixin_30532759的博客
04-29 172
　　在一些情况下，我们需要监听应用程序切换到后台或者从后台切换至前台的事件，从而进行相关处理操作。支付宝应用锁屏(IOS,Android平台)的处理中就需要监听此事件，在用户将应用切换至后台一段时间后再切换至前台的情况下就需要弹出锁屏页面。 　　下图给出Windows 应用商店应用的生命周期图，应用前后台切换就是在运行和挂起直接进行切换，关于生命周期的详细介绍可以参阅官方文档：http://ms...
监听说球帝网站，自动切换到超清页面_shuoqiudi_listener.zip
最新发布
09-04
根据提供的文件信息，我们可以推断出该压缩包中包含了特定的软件工具或脚本，旨在实现对“说球帝”网站的监控，并在检测到视频流时，自动将播放器切换至超清质量的视频播放页面。从文件名中的“_listener”一词可以...
监听用户息屏、或者切后台运行（离开页面）
qq_43715797的博客
11-05 760
监听用户息屏、或者切后台运行（离开页面）
vue开发webapp监听手机返回和退出
qq_42975998的博客
04-15 1215
之前做webapp时学到的：使用 mui 进行手机物理键的监听 首先安装 mui npm i vue-awesome-mui 然后在 main.js 里注册 import Mui from 'vue-awesome-mui'; Vue.use(Mui); index.html 里： <script type="text/javascript"> mui.init({ k...
使用vue开发移动端管理后台的注意事项
10-17
主要介绍了使用vue开发移动端管理后台的注意事项,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android判断应用在前台还是后台运行(判断应用前后台切换)
WILLIAM-HUAN 个人技术博客
06-03 1万+
我们的应用要获取后台运行的app的包名，主要是 getRunningTasks()方法的调用，经过测试在android 2.2 到 4.4的版本都运行的很好，但是在Android 5.0 Lollipop. 中获得不到，无法得到真实的后台运行app名称，在Android 5.0 Lollipop中获得的名称是 'Launcher3'，我使用过的模拟器是  Genymotion Emulato
Vue监听浏览器关闭(或者刷新)、切换标签页，并发送请求给后端
Tjohn9的博客
03-09 4012
监听浏览器关闭，关闭前发送http请求给后端，可以使用navigator.sendBeacon(url)
判断App处于前台还是后台工具包
跟踪世界脚步
01-20 455
用法 传入Context参数与想要判断是否位于前台的App的包名,会返回ture或者false表示App是否位于前台 //六种方法任选其一 //使用方法一 Boolean isForeground = BackgroundUtil.getRunningTask(context, packageName); //使用方法二 Boolean isForeground = BackgroundUtil.getRunningAppProcesses(context, packageName); //使用方法三
vue监听浏览器
xy19950125的博客
03-28 1243
需求： 在浏览器打开一个页面当返回或关闭的时候 弹出提示框 1、挂载完成后，判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventL...
web 界面切换的方式
hotboyboy的博客
04-11 1268
方式一：通过*ngIf <div nz-col nzSpan="20" class="right"> <app-beamgroup *ngIf="!isBeamSelected"></app-beamgroup> <app-beamparameter *ngIf="isBeamSelected"></app...
vue中监听浏览器关闭方法
热门推荐
she8362315的博客
10-31 2万+
需求: 我需要在页面关闭时清空本地储存的一个cookie 方法: window.addEventListener( ‘beforeunload’,e =&amp;gt;( 执行… ) ) mounted () { window.addEventListener('beforeunload', e =&amp;gt; { window.localStorage.removeItem('tit...
使用VUE监控浏览器窗口关闭时向后台发送请求
xiaobinbin2372的博客
04-21 6333
因为在项目中实现在线播放视频时，当用户直接关闭浏览器窗口，需要记录用户观看视频的进度所以用到监听窗口关闭事件。先是在网上查了一下，然后根据网上大佬博客然后自己修改之后最终测试成功！ 下面是代码： <template> <div class="video-container"></div> </template> <script> e...
EOCMS网站状态监测软件——免费功能强大的网站监控解决方案
监测页面条数设置允许用户根据网站规模调整监测的详细程度。 7. 监测频率与超时设置：随着监测网站数量的增加，监测频率也可以相应增加，以保证所有网站都能得到及时的监控。而监测超时设置则允许用户针对不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值