Webscreensaver NPM

webscreensaver

A vanilla JavaScript library to create a video screensaver experience within the browser.

This library can be used to enable a rotating video screensaver after a specified duration since the last detection of user activity. By default the screensaver will fade in a random video from a specified set defined during initialization that will encompass the entire browser window. Alternatively the plugin can be initialized on a particular <div/> and will feature screensaver functionality within said <div/>. The option also exists to control the rotating screensaver via manual keyboard shortcuts.

Getting Started

Fetch the plugin
```
$ npm install webscreensaver
```

Include the plugin

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

Initialize

Full Browser:

var wss = new WebScreensaver({
  videos: [{
    webm: '//video.webm',
    mp4: '//video.mp4'
  },
  ...
});

DIV Contained:

var wss = new WebScreensaver({
  target: document.querySelector('.vid-wrap'),
  videos: [{
    webm: '//video.webm',
    mp4: '//video.mp4'
  },
  ...
});

// ensure target has `overflow:hidden` and has a `position` explicitly set

Options

Name	Example	Description
target	`document.querySelector('.vid-wrap')`	DOM element to contain screensaver. By default this will be on the `body` tag.
videos	`[{mp4:'//abc.com/video.mp4',webm:'//abc.com/video.webm'}]`	An array of video objects containing a key value mapping of file type and file URL
stagnantTrigger	`true`	Flag indicating if the screensaver will activate based on the absence of user activity on the page otherwise keyboard events will act as the trigger. Default is `true`.
stagnantDelay	`5000`	Time in milliseconds of user inactivity before screensaver will trigger if `stagnantTrigger` is `true`.
interval	`120000`	Time in milliseconds each video should play for before switching to the next video in the provided `videos` array. If the actual video duration is shorter than the specified interval then the actual video length will be the interval length.
triggerKeycode	`32`	Keycode of the keyboard key that will trigger the start and stop of the screensaver. Default is the spacebar indicated by keycode `32`. Only applicable if `stagnantTrigger` is `false`.
nextVidKeycode	`39`	Keycode of the the keyboard key that will trigger the switch to the next video of the screensaver. Default is the right arrow key indicated by the keycode `39`. Only applicable if `stagnantTrigger` is `false`.