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.

Table of Contents

1. Getting Started
2. Options
3. Methods

Getting Started

1. Fetch the plugin

$ npm install webscreensaver

2. Include the plugin

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

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

Methods

Name	Description
startSaver	Programmatically starts the screensaver.
stopSaver	Programmatically stops the screensaver.