Telegram-канал hacker_news_feed - Hacker News: Technologies

Hacker News

09 Oct 2024 02:50

Show HN: Winamp and other media players, rebuilt for the web with Web Components (Score: 150+ in 6 hours)

Link: https://readhacker.news/s/6fUNK
Comments: https://readhacker.news/c/6fUNK

Hey all, creator of Video.js and co-founder of Mux & Zencoder here. My team and I built this. I hope you like the themes we’ve built so far, and maybe even get inspired to build your own.
I know Web Components are in a bit of a drama cycle right now. I’m happy to see them get any attention really. I’ve been pretty bullish on them since ~2013 when I started working with them, at least in the context of a widget like a video player. I’ve even given many related talks on them like this one (https://www.youtube.com/watch?v=N6Mh84SRoDg).
I would never push them for a large app or as a full replacement for React, but they’ve been incredible for making video players that are compatible across many contexts, and Player.style is a clear demonstration of that when you get to the step of embedding a theme. Web components really shine for building bits of UI that can be shared between projects. They also are the best way to avoid the long term JS framework thrash that’s a challenge for any developer who works on the web for long enough. One of the best decisions I ever made for Video.js was to not build it with jQuery. Video.js is 15 years old now and still in use, while all the jQuery players are not.
For some added context of this project, when I was building Video.js back in 2010 I put a lot of thought into how other developers would customize the player controls. I was excited to use web technologies (instead of Flash) to build a player and I knew other web devs would be too.
Fast forward 14 years — Video.js has been used on millions of websites including Twitter, Instagram, Amazon, Dropbox, Linkedin and even in United Airlines headrests. In 99.99% of those cases the default Video.js controls were used with little to no customization. So…huge adoption success, utter failure in sparking creativity. In retrospect, asking people to learn a new UI framework just to style their player was too much.
Media Chrome and Player.style are my answer to that friction.
- Media Chrome - A suite of Web Components and React Components that let you easily build a media player UI from scratch, using components you’re already familiar with.
- Player.stye - Themes built with Media Chrome, showing the cross-player and cross-framework flexibility of Media Chrome
Media Chrome is already used on sites like TED.com, Syntax.fm, and anywhere the Mux Player is used. We’ve spent the last few months building some great themes for Player.style. I probably had the most fun recreating the Youtube icon animations from scratch using SVGs and CSS. (Whoever made the originals, nicely done!)
It’s all free and open source, so don’t hesitate to jump in if you’re interested in the project. And of course I’m happy to answer any questions.