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 noSleep
    var 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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值