Video Screen Saver For The Web – webScreenSaver.js

Preview:

Description:

webScreenSaver.js is a vanilla JavaScript library for creating a video screen saver within the browser.

The library detects user activities and fades in a random video while they’re away from their computer.

See Also:

• Custom Screensaver In JavaScript – Screensaver.js
• After Dark Screensavers In CSS

How to use it:

1. Install & download.

# NPM
$ npm i webscreensaver

2. Import the webScreenSaver.js.

<script src="./webScreenSaver.js"></script>

3. Initialize the web screen saver and specify the path to the video.

var wss = new WebScreensaver({
    videos: [{
      webm: '/path/to/1.webm',
      mp4: '/path/to/1.mp4'
    },{
      webm: '/path/to/2.webm',
      mp4: '/path/to/2.mp4'
    },{
      webm: '/path/to/3.webm',
      mp4: '/path/to/3.mp4'
    },
    // ...
    ]
});

4. Append the screen saver to a specific container.

var wss = new WebScreensaver({
    target: document.querySelector('.container'),
});

5. Determine how the library tracks the user activities.

var wss = new WebScreensaver({
    // trigger the screensaver after 5 seconds when the user is idle
    stagnantDelay: 5000,
    // determine whether to trigger the screensaver based on user activity
    stagnantTrigger: true,
    
});

6. More configuration options.

var wss = new WebScreensaver({
 
    // Time in milliseconds each video should play for before switching to the next video
    interval: 2*60*1000,
    
    // Keycode that will trigger the start and stop of the screensaver
    triggerKeycode: 32, // space
    // Keycode that can be used to switch to the next video
    nextVidKeycode: 39, // right arrow
    
});

7. Start & stop the screen saver manually.

wss.startSaver();
wss.stopSave();