This script enables scrubbing through video frames using an html range input. The video frames are drawn on an html5 canvas 2D element. The player is set to loop forwards and backwards. Or else, the user can scrub through manually.
Basic web design/development skills are required.
First create your video animation as a number of frames. That is as individual images and not as an actual video file of images in a container such as mp4. Name your images sequentially starting from 0001.jpg or png up to 9999.jpg.
Although the code is written to handle filenames up to 9999.jpg it will not handle 10k images very well. I have only tested it up to 30 images and at that much it takes some time to load.
Files setup:
index.html
frames-scrubber.js
frames/0001.jpg, 0002.jpg, ...
Set initialization settings in the frames-scrubber.js file:
Set image count by setting the "lim" property in frames-scrubber.js script. The default setting is "lim = 5".
Set the aspect property in the frames-scrubber.js file for setting your video images' aspect ratio. The default is "aspect = 800/600".
The image file type or extension is set to ext = ".jpg" which is preferred because it's file size is smaller than png but change it to png is you prefer.
With your images ready and corresponding settings configured, enter markup for a canvas and range input element in your html page. The default name for the canvas id is "scrubbingFrames" and for the range input it is "framesRangeInput".
Set the min property to 0 and not 1 for the framesRangeInput range input element. Even though image filenames start at 0001 as mentioned above the array indices will start at 0 because arrays in JavaScript start at index 0. Set the max property to the number of video frames in your animation minus 1 again since arrays start at index 0. For example for images 0001.jpg to 0005.jpg set min=0 and max=4. Set the start value property to anything in between the min and max values.
In the frames-scrubber.js file, set the limit to your frames count. For example for images from 0001 to 0005 set lim = 5.
The default path for your video images is "./frames". Create a corresponding directory and put your video frames images therein.
The speed property sets the how fast the video plays, and the delay sets the wait time before it replays after it reach an end point or there is some user interaction on the range input scrubber.
Tip: you can quickly convert a directory of png's to jpg's using image magick by the following command: $mogrify -format jpg *.png
This script loads files after the firing of the load event and so you can not use it locally. It only works on a web server.