H5保持屏幕常亮方法-NoSleep插件

1.背景

移动端在浏览H5网页时，经过一段时候后系统会黑屏，手机进入休眠模式。NoSleep插件旨在让任何Android ，iOS浏览器不进入休眠状态，保持屏幕常亮。

2.原理

NoSleep插件激活时会在H5网页中生成一段mp4视频，从而保证设备常亮。

3.Demo

https://richtr.github.io/NoSleep.js/example/
直接在移动端加载该页面测试即可。

4.使用

1.引入NoSleep库，库在这里=> https://github.com/richtr/NoSleep.js/blob/master/dist/NoSleep.min.js

  <script src="js/NoSleep.min.js"></script>

2.初始化组件

 //init noSleepvar noSleep = new NoSleep();// Enable wake lock.// (must be wrapped in a user input event handler e.g. a mouse or touch handler)//  noSleep.enable()初始化方法必须绑定在鼠标事件或触摸事件内，//  当点击页面时就会激活不休眠功能document.addEventListener('click', function enableNoSleep() {document.removeEventListener('click', enableNoSleep, false);noSleep.enable();console.log('enable noSleep');}, false);

5.局限性

某些环境下不能完全兼容，可以满足正常需求啦。https://github.com/richtr/NoSleep.js/issues

H5保持屏幕常亮方法-NoSleep插件相关推荐

2021-08-12 Android APP 保持屏幕常亮和取消屏幕常亮方法
Android APP 保持屏幕常亮和取消屏幕常亮方法一.有时候进入一个app想让屏幕常亮,这个这个可以使用 FLAG_KEEP_SCREEN_ON 功能,涉及下面函数 Window flag: a ...
android view超出屏幕_Android APP界面保持屏幕常亮方法
阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 1. 在AndroidMainfest.xml 中申请 WAKE_LOCK 唤醒锁权限 <?xml version=" ...
APP界面保持屏幕常亮方法
极力推荐Android 开发大总结文章:欢迎收藏 Android 开发技术文章大总结 1. 在AndroidMainfest.xml 中申请 WAKE_LOCK 唤醒锁权限 <?xml vers ...
android 屏幕常亮 java,APP界面保持屏幕常亮方法
极力推荐Android 开发大总结文章:欢迎收藏 Android 开发技术文章大总结 1. 在AndroidMainfest.xml 中申请 WAKE_LOCK 唤醒锁权限 ... ... ... . ...
android 程序保持常亮,APP界面保持屏幕常亮方法
和您一起终身学习,这里是程序员Android 经典好文推荐,通过阅读本文,您将收获以下知识点: 一.申请WAKE_LOCK 权限二.Activity 中设置FLAG_KEEP_SCREEN_ON F ...
vue如何sleep_H5如何保持屏幕常亮—nosleep.js
前言此教程是在vue中引入nosleep.js,并使用. 安装 nosleep.js npm install nosleep.js 引入在main.js中引入 import NoSleep fro ...
Android开发-屏幕常亮的方法
方法一:xml文件中的顶层布局添加属性在你需要常亮的Activity对应的布局文件中,给需要屏幕常亮的UI组件设置:android:keepScreenOn="true" 只要A ...
简单方法保持屏幕常亮
有个需要:在用户打开应用时,希望保持屏幕常亮,不进行自动息屏和锁屏操作.方法如下: 在操作的activity中加入一行代码: protected void onCreate(@Nullable Bun ...
Android保持屏幕常亮的两种方法
保持屏幕常亮的两种方法: 我们大家在用手机的时候,会遇到这样的一个问题,就是想让我们的手机屏幕一直亮着怎么办.大家会想到的是,在手机设置里有一个不省电模式,选择这个就可以了,但是我们要在代码中是怎么样 ...