A Video Player, Ten Years Later

↗

In the summer of 2016, I wrote a web video player and called it Vido. The first commit (opens in a new tab) is dated July 8 that year. That was ten years ago.

There were plenty of video-player projects around then. My favorite was DIYgod’s DPlayer (opens in a new tab). DIYgod was ridiculously good. I wanted to write a player of my own, too.

I wrote it by hand then: the play button, progress bar, and volume control, one piece at a time.

I’ve been adding videos to the blog lately, which gave me a reason to use Vido again. I rewrote it for version 2.0 and reworked the custom styles. Here it is playing a Hatsune Miku remix of “Senbonzakura.”

Still picking my own colors

The 2016 README (opens in a new tab) already had instructions for changing the progress bar’s colors. Back then, you opened a stylesheet, found the dot and the played portion, and changed their backgrounds.

Now you can choose the colors directly and replace the dot with your own avatar. For the blog, I picked lavender, pale pink, and cream yellow, with the happy white-haired girl from my avatar. She bobs gently during playback and stops when it pauses. That motion is also disabled when the system is set to reduce motion.

On the website (opens in a new tab), you can try different colors and avatars, then save the settings. You can also use the default style as it is.

Watching videos with it again

The old version used Vue 1. Version 2.0 is written in TypeScript and no longer depends on Vue. I used Codex to help with the rewrite this time, which feels very different from writing every line myself.

The browser still plays the video; Vido adds the buttons and styling. In this blog, the video starts as a normal HTML <video> element. As it approaches the screen or I interact with it, the blog loads Vido and adds its controls. If the player code or stylesheet fails to load, the browser’s own controls remain available.

In the blog, the play button and volume control sit below the video without covering it, and the colors match the rest of the site.

It’s nice to be using something I wrote ten years ago again. It also makes me miss that summer.

That summer wasn’t entirely carefree, though. I was lost, too, sending out applications and hearing nothing back. At the time, it felt like the hardest part of my life. Seeing new graduates and interns feeling lost and hurting today brings some of that back.

Take it from your aging internet uncle, who has met a few more people by now: many of you are very good at what you do. Please don’t write yourselves off. Your education or work history might feel like a bad hand, but you’re still trying to find a way forward.

What would you, ten years from now, want to say to yourself today? How would that future version of you see this painful stretch? I don’t know the answer either. Finding Vido again just makes me glad I kept it.

If your old work feels embarrassing or useless, make it private and keep it anyway, haha. Later, it can at least remind you what you were trying to do back then.

And letting go of a project or choosing a different path is okay, too. You can stop being a developer or leave this industry altogether. There are other things you can do with your life. You don’t have to keep coding. Just don’t write yourself off along with the work.

Looking back, the obstacles felt hard, and somehow I got through them one by one. It’s all part of the process. Keep going, you talented youngsters. This old guy from the last century had better keep up, or you’ll replace me before I know it, haha.