Ambient Video Lights

Ambient is a lightweight JavaScript library that adds a cinematic background glow to video Elements. It supports two modes:

• Live Drawing Mode: Continuously renders the video frame onto a canvas.
• VTT Sprite Mode: Uses a WEBVTT sprite file to display sprite thumbnails. (Less CPU intensive)

Installation

Include the script in your project or import it as a module.

<script src="path/to/ambient.min.js"></script>

Also include the CSS file:

<link rel="stylesheet" href="path/to/ambient.min.css">

Usage

<div class=".player-wrapper">
  <video id="player" src="path/to/video.mp4" controls></video>
</div>

const player = document.getElementById('player');
const ambient = new Ambient('.player-wrapper', {
  vtt: 'path/to/sprite.vtt', // Optional: Use VTT sprite mode
  framerate: 20, // Optional: canvas framerate in live mode
});

ambient.mount(); 

CSS Options

Var	Default	Description
--blur-amount	45px	Blur amount of the background glow.
--frames-buffer	2s	Interval between frames in sprite mode.
--scale-factor	1.05	Scale factor for the background glow in sprite mode.

Methods

mount()

Creates and attaches the canvas overlay.

• In live mode, it renders live video frames onto the canvas.
• In Sprite mode, it displays sprite thumbnails based on the current video time.

unmount()

Removes the canvas and cleans up all associated event listeners.