Show HN: Winamp and other media players, rebuilt for the web with Web Components

player.style

392 points · Heff · 74 days ago

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.

63 comments
karteum · 73 days ago
If you only care about music (not videos) then you might also have a look at https://webamp.org/ You don't even need to "compile" or do anything fancy to "integrate" it : just include it (of course you might generate the playlist in your app) ! e.g.

    <!DOCTYPE html>
    <html><head><meta charset="UTF-8"><title>Music</title></head>
    <body>
    <div id="app"></div>
    <script src="https://unpkg.com/webamp"></script>
    <script>
    const webamp = new Webamp();
    webamp.setTracksToPlay([ 
        {url: "http://example.com/The%20Gathering%20-%20Travel.mp3", defaultName: "The Gathering - Travel", duration: 1.0, metaData: {title: "The Gathering - Travel", artist: " "}, },
        {url: "http://example.com/Muse%20-%20Plug%20In%20Baby.mp3", defaultName: "Muse - Plug In Baby", duration: 1.0, metaData: {title: "Muse - Plug In Baby", artist: " "}, }, ]);
    webamp.renderWhenReady(document.getElementById("app"));
    </script>
    </body></html>

Show replies

zoogeny · 74 days ago
I love the idea behind this and thank you for making it MIT license.

I just happen to be working on a media app (a video editor) and previously I have built a few video players (in both Flash and HTML/JS). We actually tried to use web components on one player (back in 2015-ish) and they were a constant pain that we eventually discarded in favor of plain old JavaScript. Strangely enough, for my current media app I've been using web components (e.g. a video editor timeline) and so far it is going very well. I'm not sure what changed or if it is just the case that the slow advancement of the web has brought compatibility far enough to make it viable.

I've just skimmed the Media Chrome docs and have only taken a quick glance at the github repo, but I like your design principles and architecture notes. My main concerns about adopting something like this (especially since I have a lot of experience building exactly stuff like this from scratch) are extensibility (e.g. how hard would it be to modify my timeline component to fit into the MediaController paradigm) and file size. One advantage of doing everything oneself is that you have everything you need and nothing more. I'm sure Media Chrome has a lot of stuff I just won't need (but someone else will) - the questions is how much bloat I am taking on for things I won't ever use. And not just components I won't use, but unused features of the components I will use. Sometimes it is just a matter of existing unnecessary functionality getting in the way of a lower-level kind of extensibility.

As an aside, your `media-elements` repo [1] does not have a license file. I see in the package.json that the elements are also MIT but having an explicit LICENSE file is always appreciated.

That being said, this is a very tempting library. At the least I will probably steal the idea to wrap my components in a media-controller like element since I've been using the containing page so far to stich my elements together and I wanted a nicer abstraction.

1. https://github.com/muxinc/media-elements

Show replies

wallawe · 74 days ago
The Mux marketing strategy is brilliant.

Take over or create new open source projects so that every developer comes across your company in the search for a video package.

Another example I noticed recently is https://github.com/cookpete/react-player

Show replies

miunau · 73 days ago
Mux looks nice, but I don't trust a company to keep a free video encoding tier, so I won't be building anything on it. The on-demand encoding for users seems a bit bananas to me too resource wise. The starter model buys you $100 worth of credits for $10. It all just seems a big bait and switch in the making- I can't trust a company that seems to burn money on the daily anymore. At least charge me -something-, I know the encoding isn't free. Barring that, a section on their site explaining how they are able to undercut everyone in the business and still keep going as a going concern would go a long way to alleviating my doubts. Been burned by SaaS too many times, man.

Show replies

dpedu · 74 days ago
There's some weirdness around focus going on here, hopefully this comes across as constructive criticism. All of them have the same problem:

When you click on the video itself, the left and right arrow keys work to scrub the video backwards and forwards. Up and down do nothing.

When you click on the scrubber, the left and right arrow keys stop working. Also, the up and down arrow keys start working to rewind/advance the video a different amount of time.

If you click in void space, e.g. on the Winamp example or the blue bar that looks like windows 98 on the Reelplay example - both of these controls stop working, as well as space to play/pause.

Latest chrome on macos.

Show replies