A better Video Scrubber

The internet’s series of tubes are getting fatter every day, but a lot of video sites still cause viewers grief with stuck frames, buffering and a general lack of feedback. Here I’m sketching out some tweaks to the std Video Scrubber, hoping to alleviate some of the cognitive friction generated while watching videos on the web.

Details of my obsessions with tiny media controls after the jump…

The beginning of the scrubber track is subtly broken off into a “rewind to beginning” button, so users don’t have to drag reassuringly into the start of the timeline or guess whether they are clicking at the start or 2 seconds into the video clip.

When the scrubber is dragged to a part of the timeline that hasn’t been downloaded yet, it changes to a “concerned” appearance. this sets user expectations, so they’re clear some buffering is inevitable.

As the video is downloading, the leading edge (that shows how much as been loaded) gently undulates to show that more bits are coming in. The undulation can even be stretched proportionally to visualize the speed of the incoming data and give an idea of how much more footage will be available in, say, one minute from now.

<video onStalled="videoScrubber.stopUndulating()" />

I bet it wouldn’t take much extra work on top of HTML5 to build this, I wish I had the attention span to find out…