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

karteum · 2024-10-09T08:18:39 1728461919

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>

Heff · 2024-10-09T15:42:48 1728488568

That's a really nice implementation. I feel like it should be easy for that to support videos too, if desired. I assume it's just using a media element under the hood.

zoogeny · 2024-10-08T21:04:14 1728421454

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

Heff · 2024-10-08T21:52:53 1728424373

Back around the same 2015 time frame I think I was being very optimistic and stubborn when it came to Web Components. I very much wanted them to work, but didn't really get anything into production until around 2020. There was a v2 of the web component spec between then and now, but I'm not an expert in what changed. Now I'm seeing web components everywhere, especially in media players. i.e. Apple's web player.

I'm glad you like the controller architecture. The original version just had every element pointing directly to the media element, and the controller cleaned up a lot. Highly recommend it, at least compared to what I was doing.

A video editor UI I think is natural extension of the Media Chrome suite. I'd love to hear what else might be helpful there if you want to post an issue in the repo.

I can deeply empathize with your hesitation to adopt something like media chrome based on future flexibility and size. I'll give you 3 points that would sell me on it. :) 1. You can only include the UI components you need, which is at least a major difference from other web video players when it comes to size. 2. We have some of the most experienced player devs working on it, including for things like accessibility and upcoming internationalization. 3. We're working hard to make it super configurable between slots, css parts, and css vars.

Of course we'll never beat the file size of completely custom software, but I feel like it'll come pretty close once all the basic features are built in.

Thanks for the heads up on the elements license!

wallawe · 2024-10-08T20:34:35 1728419675

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

Heff · 2024-10-08T21:16:31 1728422191

Thanks! "Brilliant" might be giving us too much credit. We're mostly just paying attention to how devs are using video and trying to solve problems in that space. Next-video.dev is another example I'm proud of.

Some of what you're seeing on the open source player front is that we already kind of have to support those projects anyway. We're player agnostic, so our customers use a lot of open source, including projects that aren't actively being maintained.

I think we're benefitting right now from being one of a very few dev-focused video companies that's also actively contributing to open source.

miunau · 2024-10-09T07:41:09 1728459669

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.

Heff · 2024-10-09T17:30:57 1728495057

Oh boy, I could write a book in response to this...

> a section on their site explaining how they are able to undercut everyone in the business and still keep going

This is great feedback that I'm putting on our todo list. We should absolutely have this.

We'll never put pricing out there that we can't handle with our economics, or at least have a clear path to supporting. All of our volume pricing is available publicly, so you should never be bait-and-switched if you're understanding concepts like credits. This is in contrast to some of our competitors that regularly surprise users with new pricing when they hit scale. I hate that so much.

Under the hood we use just-in-time encoding and other advanced optimizations that do give us an edge. Not to mention economies of scale. Writeup to come.

But a challenge comes in customer perception. Some of our customers understand encoding and it's cost, plus the benefits it brings like adaptive streaming and handling user-generated uploads. Many devs are new to video and expect it to cost the same as uploading an MP4 to S3. Some point to our competitors with no encoding costs, and some even point to Youtube as a reason why it should be cheaper. In the past Mux has been labeled as "the expensive option" because we charged for encoding, so we've been working on new pricing shape (some launched already, some to come) that allows you to come in at levels using less encoding that we can support economically, then elect higher levels of encoding costs/values when you understand if they're worth it to you.

We also think video should be more places than it is today, but video is inherently expensive in comparison to many other costs related to building an app, so we see it as our job to keep pushing costs down and shaping pricing so video is accessible to more use cases.

have_faith · 2024-10-09T09:37:28 1728466648

There are use-cases were encoding is a huge cost centre, like with user generated content, and so we wanted to make sure you could still build on Mux with that type of model. The tradeoffs for using free encoding are listed here though: https://docs.mux.com/guides/use-video-quality-levels. The free (basic) encoding still has charges for storage and delivery also. We hope that by helping you reduce costs when getting off the ground we can grow with you.

The on-demand (JIT) encoding is actual magic in how well it consistently works!

(I work at Mux)

pjc50 · 2024-10-09T10:14:06 1728468846

Mux looks very interesting to me, as a light user of Video.js, but when I put in my entirely normal .org.uk email address for an account signup I get "There was a problem with your request. Please try again." with no further explanation?

have_faith · 2024-10-09T11:16:11 1728472571

We have a quite a few users using .org.uk so this shouldn't be the issue...

If you don't mind sending a screenshot or other details to support@mux we'll figure out what's happening. Edge cases always seem to reveal themselves when someone else is looking at it.

dpedu · 2024-10-08T22:23:22 1728426202

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.

Heff · 2024-10-08T22:46:53 1728427613

Good feedback, thanks! There's a related issue in the media chrome repo here: https://github.com/muxinc/media-chrome/issues/957

The situation is a little complex with "hot keys" for controlling the video in general (after clicking on the video), accessibility controls for each component, and then general accessibility expectations for the whole page. For example, should we capture the up and down arrows to always control volume when the player is in focus, or should we not do that because people expect that for scrolling the page.

All that said, we definitely have some iteration ahead of us on this front so thanks again for the input.

dnsbty · 2024-10-08T22:18:15 1728425895

Player.style is excellent!

In my last startup I started to build my own video.js theme, and after a few hours realized it probably wasn't worth my time and stuck with the defaults. Going forward these themes would give me a much better starting point to do something more custom.

Thanks for sharing!

Heff · 2024-10-08T22:48:46 1728427726

Thank you! If you still experience friction when trying to build your own theme, then our job isn't done. So let us know!

djhn · 2024-10-09T06:42:41 1728456161

Since there are video experts around in this thread, does anyone know if there are implementations out there for a player that enables fast smooth scrubbing with audio, similar to how you can scrub and/or watch the timeline at 16x in Adobe Premiere. I guess one needs to eagerly load something like a 16khz mono audio track and some sort of 1fps sprite or 240p video format with I-frames only to switch to on scrub.

Heff · 2024-10-09T15:48:34 1728488914

Anything frame-accurate or smooth scrubbing has always been a challenge with he abstraction level of the video element. I don't have an exact answer from you, but you might look around the web codecs space, where more performant examples are being built at a lower level. https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_A...

spankalee · 2024-10-08T19:25:12 1728415512

Web components are great. You all are doing awesome things with them at Mux!

spankalee · 2024-10-08T19:30:39 1728415839

One small bit of feedback: you should look into using adoptedStyleSheets. They're very well supported now, and give a nice perf boost for repeated elements. You can fall back to <style> in the shadow root if the user's browser doesn't support them.

Heff · 2024-10-08T19:35:47 1728416147

Iiiinteresting. Some how I'd missed that so far. Thanks for the tip.

01jonny01 · 2024-10-10T09:18:20 1728551900

You can adapt your code to work with YouTube embeds. Set the youtube embed src to the following:

controls=0 – Removes the player controls (like play, pause, volume). modestbranding=1 – Minimizes the YouTube logo in the player. rel=0 – Prevents showing related videos at the end (only works to show videos from the same channel). showinfo=0 – Removes the video title and uploader info (this parameter is deprecated but modestbranding should help). fs=0 – Disables the fullscreen button. iv_load_policy=3 – Hides video annotations (like pop-up notifications).

Then have your code detect for youtube embed urls and use a iframe to create the player (rather than a video tag). Finally map your player controls to the youtube embed api. Plyr.io have done something similar.

0points · 2024-10-09T10:54:02 1728471242

Making something somewhat similar to Winamp, does not make a Winamp.

thih9 · 2024-10-09T10:16:03 1728468963

The title was confusing to me, Winamp is the least impressive of these examples. This looks great overall - congrats!

Heff · 2024-10-09T16:08:18 1728490098

Thank you! Winamp is getting a lot of love (and controversy) right now so it felt worth calling out. But it's not my favorite of the themes in practice. I think that's Sutro, which kind of surprised us by how nice it turned out.

andrewchilds · 2024-10-08T19:27:09 1728415629

Nicely done. I wish Peacock had used one of these during the Olympics / Paralympics, specifically one that has a visible chapter scrubber like these do. Watching a 6 hour stream with a dozen different matches meant not having any idea who was playing when. Hopefully they'll use one of these players next time around!

Heff · 2024-10-08T19:47:43 1728416863

Thank you! One of the devs working on the Peacock player now helped build a lot of Media Chrome, so who knows what may come of that.

To give them some credit, I thought the multi-screen view they built across their players was pretty novel.

sgt · 2024-10-09T17:43:50 1728495830

What's left for Web Components to get in order to completely get rid of frameworks like VueJS and React? By getting rid of I mean for 99% of use cases.

It may also mean a light framework on top of Web Components, but getting rid of all these dependencies and ever-changing framework is of course an old dream.

lovethevoid · 2024-10-09T18:44:59 1728499499

The light framework you're referencing is Lit or Shoelace. Also web components have taken off, just in the enterprise space where most teams are going to be using whatever they prefer whether that's Svelte or React or Vue or Angular - so slotting in web components works.

For everyone else, you start running into the issue of the classic https://xkcd.com/927/ situation. The problem of ever-changing frameworks will always be a constant. People want different things from their frameworks!

maelito · 2024-10-08T19:09:19 1728414559

Thanks for the link and the work.

I wonder what would be the other uses of web components.

Practical case : at work we want to distribute a subsidies simulator. It's currently an iframe. What would be the advantages of distributing a web component instead of an iframe ?

spankalee · 2024-10-08T19:24:40 1728415480

Web components and iframes are not mutually exclusive. Web components off ease of use and page styles and events integration, iframes offer a much stronger encapsulation boundary. You can use a web component to host and load an iframe even.

A few advantages of web components if you don't need the security boundary of iframes: - Web components can naturally resize to their content where iframes can't. - Some page styles inherit, like `color`, `font-family` and all CSS custom properties, so they can look more integrated. - Web components can fire events. - Web components can have slots to project content from the use site into. - Web components are much lighter weight than iframes.

Heff · 2024-10-08T19:32:57 1728415977

Great points! We've talked about using iframes when we specifically don't want people to customize things, like single-video embeds.

spankalee · 2024-10-08T19:35:49 1728416149

You can set the CSS properties that you don't want to inherit, you shouldn't need an iframe.

Heff · 2024-10-08T19:44:10 1728416650

That's true. I think I still like the limits of an iframe as a design constraint, compared to web components where you have to explicitly make those decisions. But really what tips me into iframe land is when using a backend for the HTML page can unlock something you can't do otherwise.

Heff · 2024-10-08T19:20:38 1728415238

Good question. There’s a good post from Lea Verou worth reading. https://lea.verou.me/blog/2024/wcs-vs-frameworks/

I think anything meant to be like a widget is a good fit. But an iframe you have the option of putting an app behind it while a web component is purely front end code. So maybe that’s a limitation for you. We at least plan to wrap iframes in web components for a nicer embed API.

pglevy · 2024-10-09T12:24:09 1728476649

Site looks great. I checked audio, HTML, and selected a dark primary color (purple) and the first thing I see is unusable in terms of color contrast. I would expect a tool that looks this slick to work smarter OOTB.

Heff · 2024-10-09T15:54:52 1728489292

Fully flexible color choice is a foot gun. I've definitely made some very ugly themes with that too. The goal is to have very many themes here, including user-submitted ones, so it might be hard to create something that can warn about issues across all of them. But seeing as we have pretty clear foreground and background color settings with primary/secondary I bet we could make something helpful.

have_faith · 2024-10-09T13:18:33 1728479913

It's very much a pick your own palette experience at the moment but it's a good shout, we could show a warning if the colors being picked don't meet accessible contrast values.

troupo · 2024-10-09T06:39:38 1728455978

It would be nice to add some styles where controls don't cover the video (I don't understand why at one point everyone decided that video controls have to cover actual video).

Otherwise great project!

redhippo · 2024-10-09T00:15:32 1728432932

I love it. Just one kindness: could you add subtitle tracks to the wizard? They are quite hard to add for now, since there is no documentation and media-chrome seems to use a different synthax.

mmcclure · 2024-10-09T00:28:23 1728433703

Thank you for the feedback! I'm not quite sure I'm following, though. By the wizard do you mean the framework/element picker within a theme? Would you want the wizard there to be something where you can put in a URL for a subtitle track and we'll add it to the generated tag?

If you're seeing something weird around subtitle syntax then there's probably a documentation issue somewhere (or I'm misunderstanding your question). Subtitles themselves should work with a standard `<track>` in the media element, and the only other place we touch them is via the captions button/menu to toggle those tracks.

redhippo · 2024-10-09T00:54:29 1728435269

About the wizard, it would help if you just had a "Subtitles" checkbox somewhere which then adds a blank <track> line to the script.

As for the synthax question, my point is that your script looks like this

  <video
    slot="media"
    src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/low.mp4"
    playsinline
    crossorigin
  ></video>

And media chorme looks like this

</video>

And I just don't know how to interpolate the two

(Edit, checking further, I did manage to mix the two, and I can play subtitles over your demo video, but not over mine so I guess a foolproof sample in the wizard is probably needed :D )

mmcclure · 2024-10-09T01:09:56 1728436196

Ahh ok, I see your point. I'll open an issue on the repo to track this, makes sense to me! Either way, helps to really drive the point home that "it's just a normal media element in a slot."

dfox · 2024-10-08T20:07:50 1728418070

If there is an CoolBar grab handle (which is UX hint), it should be functional and not just work as a click site to play the video ;)

Heff · 2024-10-08T20:22:02 1728418922

That's fair. I think we have a little polish work still to do on that one. :)

danslinky · 2024-10-08T21:58:53 1728424733

Thank you for reminding me of Reelplay. I think.

Heff · 2024-10-08T22:03:29 1728425009

Reelplayer! The first web video player that I (and many others) ever used.

elnova · 2024-10-09T05:15:12 1728450912

it really whips to llama's ass.

Heff · 2024-10-09T18:00:59 1728496859

Had to be said :)

tomjen3 · 2024-10-08T20:14:08 1728418448

I have always wondered what the point of Web Components was. Do you have a preferred intro to them?

solomonb · 2024-10-08T21:01:57 1728421317

Any chance you can do foobar2000?

Heff · 2024-10-08T21:18:33 1728422313

lol, we'll put it on the list! And obviously PRs welcome. :)

nimzoLarsen · 2024-10-09T05:41:47 1728452507

Beautiful work here and thank you for making it FOSS. Congrats on shipping!

doubleorseven · 2024-10-09T06:44:22 1728456262

This one made my day.

One thing that I feel should be mandatory when building applications is setting: `user-select: none;` and only allowing it where it's needed. For example, the reelplay theme bar is selectable

Again, thank you for this wonderful work

cebu_blue · 2024-10-09T18:04:55 1728497095

Clicked hide on this by accident on the front page.

pjmlp · 2024-10-09T11:49:32 1728474572

Love the idea, congratulations on the effort.

theblackdahlia · 2024-10-08T20:29:30 1728419370

I love MUX so much!

2024-10-08T18:31:44 1728412304

[deleted]

henning · 2024-10-08T19:17:03 1728415023

An old version of Winamp will load very quickly and run very well on modest hardware. This webpage does not scroll smoothly on a 2019 Mac Book Pro and there's a long delay in loading the gratuitous, confusing video you have on the page. You have created a massive performance regression for no reason.

afavour · 2024-10-08T19:17:28 1728415048

It's a bit of fun. Relax.

ale42 · 2024-10-08T19:36:02 1728416162

I totally agree that this is very heavy compared to the original player, but that's probably not the point... maybe it's just for fun... ;-)

mmcclure · 2024-10-08T19:54:30 1728417270

This was one where we almost didn't include it because it's pretty impractical, but...I still love it. Yes, 100% fun.

If people actually like it we should take a performance pass. In our defense, we at least switched out the original bmp files from the first pass we took at hacking this together.

Heff · 2024-10-08T19:23:13 1728415393

Yeah, we admittedly have some performance improvements on the site itself. It’s brand new so that will come. The themes themselves are performant, though I don’t know how to compare that to the original Winamp. Thanks for the feedback!

Narishma · 2024-10-09T00:20:30 1728433230

You could run the original on an 86box period-accurate config.

phplovesong · 2024-10-09T03:47:55 1728445675

Very nice!

Its refreshing to see this kind of work being done. Right now all the framework authors are going berserk about web-components and spewing "th3y suCk" and "w3bcomp0ents are N0T th3 futUr3!". Just nonsense. WC allow better reusability than ANY react-like framework can, and are universal. You can do pretty much anything with them. The hype train right now seem to be on SSR, and its just mad, like WTF we had server side rendering since the 90s, and then it was all about SPA's, and now they want to basically reimplement PHP era websites with SSR, making you pretty much vendor locked in to nodejs.

I take a WC over a bloated npm installed react project with 2345 dependencies any day. A WC that works today WILL work just as good if not better in 2036. Can your react do that?