When we sat down to reimagine our website’s process page, we wanted to visualize the dynamic nature of our process with a whimsical animation that responded to a user scrolling the page. After some preliminary research, we realized the development would be an intensive undertaking so we decided upon a two step approach. We would go live a solid temporary solution to meet our target launch date and in tandem develop a more robust permanent solution.
Our designers quickly mocked up an animatic to demonstrate the desired movement of the squiggle animation. While scrubbing through the video in Quicktime, something about the ease of scrolling through the video with the trackpad felt very natural. Which raised the question, what if we were able to replicate the functionality of scrubbing through an actual video on our site?
In search of ways to optimize, we found that adding keyframe indexes to the video file significantly improved the animation. Keyframe indexes helped us to easily locate individual frames as the user scrolls, similar to the Dewey Decimal System in a library. With the indexes in place, scrubbing the video in browser nearly resembled Quicktime.
However, when we deployed our experiment to our staging server, the performance was even worse than before. Through some more debugging, we found the new problem was how HTML5 <video> implements prefetching. The video player made new requests for content every time the user scrubbed and the content requests sent over the network were returning exponentially slower than the local requests.
Solution: we wrote a library which uses a cached-in-browser memory version of the video to eliminate network latency between requests, called scrub.js.
Check It Out
Zach Brown is a Developer at Use All Five.
Follow Zach on Twitter
Get new perspectives and the latest information delivered to your inbox: