Whitewater Video

In most early mobile web browsers, the ability to automatically play a video without user action was disabled. While building the Whitewater version of thisalso.com the team wanted to use small, looping videos in a few situations in which animated GIFs would not be appropriate, so I developed a workaround that would give us better control of the video content on our site.

An example “diffmap” created by the Whitewater encoder

Whitewater works by applying a basic form of compression to a video file, which encodes it into a series of images (not a sequence of frames) and a metadata file, and then reassembling the original video into an HTML canvas element using the Whitewater JavaScript library. I wrote about this process in more detail on Medium.

An illustration of a stick figure running. The graphic highlights the parts of the video that stay the same between frames and those that change.
Finding the differences between successive frames
An illustration of a stick figure running. The graphic shows a portion of a video frame being assembled and then composited on top of the existing frame data.
Reassembling a video from its parts

The compression tool is a command-line utility written in Python and distributed on PyPI. The player is written in JavaScript and supports methods, properties, and events loosely based on native HTML5 media APIs.

Responsibilities

Team