The Jerky Playbar

There’s nothing worse than shooting for perfect and feeling like you’ve come up just short.

It feels like all that extra effort, all those tiny details, everything you worked so hard for, was for nothing.

I’m not sure we mentioned it in the launch post for our new player, Vulcan, but Joe (our lead product designer) and I have been working on the visual design for Vulcan for over two years.

The first research document created for the new player was dated January 13, 2014. That’s a literal internet eternity, and it’s something we’re incredibly proud of.

Our player is embedded on hundreds of millions of web pages, all of which look very different. With our previous player, we worked incredibly hard to make an extremely minimal player that would let the video content in the player stand out. In fact, the original code name for that player was Matador: the player that gets out of the way.

So with Vulcan, we wanted to one-up Matador. We wanted an even more minimal and functional design. We wanted a timeless look, not definitively part of any passing trend.

I’m extremely proud of what we created, particularly the visual and interactive design of the player and all the microscopic little touches.

The arrival of the jerk

But there was one thing that has been so, so wrong about Vulcan from the moment we launched. It’s absolutely disgusting. It’s an abomination. It’s a huge mar on the beauty that is Vulcan. That mar is the jerky motion of the playbar. Look at this garbage:

You may think I’m being hyperbolic, but I had a visceral reaction to that jerky playbar. I’d wake up in the night with a nagging feeling that I couldn’t shake. Something was wrong.

“You may think I’m being hyperbolic, but I had a visceral reaction to that jerky playbar.”

Originally, we had designed (and built!) a perfectly smooth playbar, gliding effortlessly along as the video played back before you. But in the weeks leading up to the launch of Vulcan, Chrome shipped a devastating change: when you hovered your cursor on and off of Vulcan, the color of the video momentarily shifted, like this:

We scrambled to figure out what was wrong, and discovered that if we disabled the smooth transition on the playbar, the color-shift problem went away. We spent a day investigating the issue, but couldn’t figure out a fix, and with a long list of other changes we needed to make before launch, we made the tough decision to opt for the jerky playbar in order to avoid the color-shift bug. Goodbye sweet dreams.

We made sure to shoot the product shots with videos that were several minutes in length to make the jerky motion less apparent. That felt icky, but it was the best we could do.

Confronting the jerk

I honestly can’t remember what the straw was that broke the camel’s back, but one day enough was enough. A deep dive on the problem revealed that having nested elements, each with their own CSS transition, caused Chrome to shift video playback to use software decoding momentarily as the transitions completed.

If you use a single transition, it will happily decode in hardware the whole time. That’s what we wanted. So the reason dropping the smooth transition on the playbar fixed this the first time around was because it was an extra transition (the other being the quick, soft fade of the player controls on hover).

There wasn’t an easy fix for this transition conundrum, but we were convinced there was a way to smooth things out. After going down a lot of dead-ends, we finally arrived at something that worked.

We use a requestAnimationFrame loop and update the bar’s position at 60 frames a second. It’s incredibly smooth and precise, and through a lot of optimization, not very resource-intensive.

We also employed a similar strategy to manually tween the buffer bar (how much of the video is loaded), so it’s nice and smooth too. Finally, sweet, sweet smooth playbar bliss:

The pursuit of perfection

Most companies and people get the easy details right (low work, high reward), and very few get the hard details right (high work, unknown reward). I find it funny (and frustrating) that the “hard details” become very obvious to us all in retrospect. Once someone puts in the time to really perfect a detail and the market reacts well to it, we all pretend like it was obvious from the start.

I’m a staunch believer that it’s details like a smooth playbar that add up to create a remarkable overall experience. It’s hard work getting all the little things right, which is why most experiences aren’t remarkable.

“I’m a staunch believer that it’s details like a smooth playbar that add up to create a remarkable overall experience.”

When you’re in the moment, it’s easy to talk yourself out of spending the time to perfect something. The cost of getting these details right can often be very high, and the reward for getting them right is often difficult or impossible to quantify.

When pursuing perfection like this, there is no doubt a lot of wasted effort — time spent on details that turn out not to matter. But to create a truly excellent product or experience, you have to be willing and excited to consistently invest time and energy into these details.

My favorite thing about Apple is that they sweat the small stuff. They serve as a shining example of how getting every detail right can lead to tremendous commercial success.

And of course our other not-so-secret motivation behind this fix is that once you see a smooth playbar, it can’t be unseen. You’ll now be plagued by jerky motion as you watch videos in other players, just as I have been tortured for months by our own horrid player! Well, my true hope is that everyone else takes the time to smooth out their playbars.

My sincere apologies that you had to stare at that haunting, jerky playbar for several months while we worked out this kink.