Fundamentally, the system used a crane motor to rotate an axle with a small circular metal disk rotating. On-top, a black reflective disk was placed (not shown in the setup).


To control the speed of the motor, an Arduino was used to provide power to the motor. Unfortunately, an S7 Edge was used to record the video, which yielded grainy footage and poor focus.


After the video was recorded, it was preprocessed on iMovie to further reduce motion blur, correct the color values (hue, saturation, etc.), and later remove the audio and trimmed it to precisely one full 360º rotation in 36 seconds.

While the HTML5 video element seemed promising, it failed to provide performant seeks. The reasoning behind this is due to browsers by default supporting only three buffering schemes: none, metadata or "auto".

The fix was to adopt the Plyr open-source video playing library. The advantage of this library is that it allows for more customizability with respect to the available controls and integrating tracks.

Tracks are the key capability allowing for near-constant time seeks. By leveraging *.vtt extensions used for subtitles, it's possible to provide graphics at given snapshots in time.


The creation process is as follows. First, the video was converted to mp4 format using Handbrake. Secondly, ffmpeg was used to extract n frames per second (chosen value was 2). After, imagemagick was used to append all the files into one large sprite, compressed to 50% size. Lastly, the png file was further compressed using a small factor lossy compression.

After the sprite was created, a simple Python script was written to produce the coordinate values for traversing through the sprite at given x/y/w/h values. This yielded a ~6.4MB sprite covering 72 frames which are traversed during seeks at the given coordinates in the vtt file.