The most annoying video player of all time

Summary

It’s 1995. The arcade is a cathedral of noise and neon. I’ve thrown my hands up in the air, again, in disbelief; the unfairness of the Area 51 sneak attacks has me all riled up. I clutch a single quarter, heart pounding, eyes locked on the “Continue?” screen. Ten seconds. Nine. Eight. The world shrinks to a single question: Can I keep playing? Should I? What time is mom supposed to be here?That pay-to-play mechanic, while suuuuper frustrating, is suuuuper irresistible, and it became the main inspiration for my latest task while planning our Web Dev Challenge: use Media Chrome, our open-source video player toolkit, to build the worst video player I could dream up.Read on to see the player I came up with, how it was built, and how you can battle me for the crown of the most annoying video player of all time.Modern video players often feel like the same gray rectangle. Play, pause, scrub, repeat. Yes, I know, this exists for good reasons: consistency, accessibility, practicality… but still, I wondered, what else could we come up with? The web is an amazing infinite canvas. It’s a shame to trap our creations within the confines of homogeneity.There’s a common thread across some of my favorite websites I’ve visited: they all use motion, interactivity, video, 3D–artist tools for creating lifelike experiences and art on the web. Naturally, Three.js and its react-three-fiber counterpart felt like the perfect place to start noodling.When I set out with this project, I wondered how I could control the video player without really using any of the traditional buttons that we're used to seeing. I wanted the player to be more like a machine that you interact with, not a form that you click.I decided that the goal of the video player would be to pick up a coin and drop it into a coin slot. If you get it in, the coin buys you exactly three seconds of video playback. No more, no less.With the machine mechanic in mind, I started by creating a fresh Three.js scene and building a coin ...