Video frames scrubber
Description
This script enables scrubbing through video frames using an html range input. The video frames are loaded each as an image node as apposed to using the 2D canvas as with the version here at frames-scrubber-canvas. The source code is spread across multiple files with semantic names which would make it some easier to learn over the aforementioned canvas version.
Audience
Basic web design/development skills are required.
Usage
You will enter your special config settings in the last file namely app.js such as start = "videoA0001.jpg". The video image frame files are expected to be named sequentially; ie. 0001.jpg, 0002.jpg, ... as with any video sequence of images. The player is set to advance at every 100ms.
Files
FramesScrubber.getLeadingDigits.js
FramesScrubber.writeImgFilenames.js
FramesScrubber.loadImgFrames.js
Demo
Final Notes
This DOM video animation uses z-index'ing for switching frame's raising the current and lowering the previous frames z-index. In this way all the frames of the video are loaded in the DOM as image nodes. For a video beyond a mere second animation that would amount to a whole lot of nodes. You might try loading a single image node and replacing image nodes in and out between frames instead. But the DOM does not swap image nodes quickly enough for playing smooth video. Instead of smooth video you would get flashing of the background on each frame change especially during the first play thru before caching. With using z-index'ing for switching frames the previous image frame is always behind/below the current and so there would never be a flash of the background.
As an alternative to z-index'ing image frames, you might try updating the src property of a single image in the DOM. Alternatively second you might try using a single div node's background-image property updating on each frame. I would guess you would get flashing just the same. The DOM is not intented for high speed video animation. Using the 2D canvas works with out flashing. The 2D canvas is designed for high speed video frame rates. For small enough frame counts the difference would be trivial.
As mentioned in the Usage notes above the player is set to play at 100ms by default. If you are interested in learning about this frame rate setting in comparison to fps frame rates used in video production then you would appreciate this raf-intro article.