I recently noticed a recurring visual artifact in the "Most Replayed" heatmap on the YouTube player. The highest peaks were always surrounded by two dips. I got curious about why they were there, so I decided to reverse engineer the feature to find out.
This post documents the deep dive. It starts with a system design recreation, reverse engineering the rendering code, and ends with the mathematics.
This is also my first attempt at writing an interactive article. I would love to hear your thoughts on the investigation and the format.
plastic041•48m ago
Rendering bezier curves on the client side seems reasonable. Calculating ~400 points and rendering 100 curves would not impact performance, but I wonder if these little interactions would impact performance if added up.
About YouTube's comment about Gangnam Style, it wasn't a tweet. You can't find the original post because it was google+, which is dead. Google said it was a joke shortly afterwards: https://www.cnet.com/tech/services-and-software/gangnam-styl...
prvt•31m ago
Re: Blurry canvases: You are spotting the classic HTML5 Canvas high-DPI issue. It happens because the canvas backing store pixels don't map 1:1 to CSS pixels on high-density displays (like Retina screens). I likely need to scale the canvas drawing context by window.devicePixelRatio to fix that sharpness. Good catch.
Re: Performance: That is an interesting thought. Since the calculation only triggers when you visit (or resize) the video player, there is definitely a CPU spike. My guess is they chose this approach to have a "plug and play" rendering logic that adapts perfectly to the client's specific device width and pixel density, rather than generating thousands of static image variations on the server.
Re: Gangnam Style: Ah, Google+! That explains why I couldn't find the original source. Thanks for the correction; I will add an EDIT note below the image in the article to clarify.