/javascript-video-scrubber

A demonstration of how to scrub through a JPEG sequence using a range input slider.

Primary LanguageJavaScript

javascript-video-scrubber

A demonstration of how to scrub through a video (JPEG sequence) with native window scrolling position (As seen on NikeResponsibility.com)

Created by Gary Hepting and the Dev Team at Emerge Interactive Visit Emerge Interactive at [http://emergeinteractive.com/]

View the live demo at [http://emergeinteractive.com/demos/javascript-video-scrubber/]

OVERVIEW:

This demonstration shows how to create a video-like scrub effect with a sequence of JPEG image files using Javascript.

DEMO FILES:

The demo 'index.html' file can be opened locally in any browser. It relys on the following additional resources:

  1. styles.css
  2. js/javascript-video-scrubber.js
  3. jQuery (loaded via Google CDN)
  4. sequence of JPEG image files in 'frames' folder (with sequencial filenames)

SOURCE FILES:

Included in the 'source files' folder are two things:

  1. A PSD file for creating your own custom grid overlay pattern
  2. An Adobe Fireworks batch script for batch optimizing your own image sequence