flicker

Create beautiful, seekable, mobile-friendly-auto-playable HTML videos (faked with sprite animations and canvas).

Demo: flicker.jonathan-brooks.co.uk

Install

Why?

I basically didn't like HTML video limitations on mobile (specifically no autoplay for hero backgrounds), so I figured a good solution would be to use sprite animations - but packing the sprites and converting the frame coords to JSON with an external tool took forever, and I wanted to play/pause/reverse/seek my sprite animations easier. So I made a tool which does both. Essentially, my pipeline was as follows:

Useage - Step 0 - Generating image sequences for packing

This step, namely converting your video into an image sequence, is at your discretion. Here are a couple possible methods:

• Using Photoshop: How To Convert A Video Into An Image Sequence
• Using online-convert.com: Online image converter to JPEG (it should be noted that when I tried this, the jpegs were in the wrong order and need to be sorted)

Useage - Step 1 - Packing the image sequences into sprites

After running npm install flicker, you should notice the following folders in the package directory:

Before running the flicker app, you'll need to move your image sequences into the sequences/ folder. Each sequence should be stored within it's own folder, resembling the following:

Then run npm start from the package directory - this process can take a little while, depending on the amount of images being packed into sprites. After it's finished, your packed sprites and the JSON map representing the entire animation (both sequence1 and sequence2 combined) will be inside flicker/:

Useage - Step 2 - Using the sprites in your HTML

You can find an example by heading to flicker.jonathan-brooks.co.uk and viewing the page source, but I'll include a snippet on it's set up here:

Defining a flicker context

Quick note, the canvas width and height attributes have been set according to the native size of each image in the sprite (each image is the same size, as they're all derived from the same video). Make sure to do this for your canvas too - then scaling it is as easy changing the width/height in CSS.

Additionally, the following snippet has a .controls range slider which acts as a seek control for the flicker. At a later date I'll document how you can replace this with your own custom implementation using the Flicker.seek() function.

Creating and configuring an instance of the flicker object

The js setup in this snippet is (thus far) as complicated as the config gets. I'll be adding additional features in the future, like additional event handlers, and more config options like playThrough (pausing between sequences) and show/hide default seek controls

Notes

It should be noted that this tool is very much in pre-production, and as such it's still pretty limited. Here are some of the issues I'll be working on henceforth:

• At the moment, because the sprite packer tries to process all the sequences at once, it falls over if the sequences are too long (and they often are - 24 images = 1 second of video after all). This fix is a priority and will come soon.
• In testing the images package (which flicker depends on for sprite packing), I found that somewhat arbitrarily it falls over when the sprite resolution roughly exceeds 10,000 x 10,000 pixels. Again, I will do some investigating into why this limit exists and see if I can work around it with some crafty image compression (or something similar).
• At the moment you have to manually separate the huge monolithic image sequences you get from the video export manually - at some point in the future I'm hoping to add custom CLI parameters/JSON config file which let you specify when to cut the sequence into sub-sequences at given points in time (specified in frames or seconds from the beginning of the video).

If you have any questions, or wish to contribute, then don't hesitate to contact me!

Happy coding everyone ♥