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