Video Screen Saver For The Web – webScreenSaver.js

Category: Javascript | July 5, 2022
Views Total:447 views
Official Page:Go to website
Last Update:July 5, 2022


Video Screen Saver For The Web – webScreenSaver.js


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:

How to use it:

1. Install & download.

$ 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.


You Might Be Interested In:

Leave a Reply