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

392 点作者 Heff7 个月前

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 (<a href="https://www.youtube.com/watch?v=N6Mh84SRoDg" rel="nofollow">https://www.youtube.com/watch?v=N6Mh84SRoDg</a>).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 ChromeMedia 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.

29 条评论

karteum7 个月前

If you only care about music (not videos) then you might also have a look at <a href="https://webamp.org/" rel="nofollow">https://webamp.org/</a> 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.<pre><code> <!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></code></pre>

评论 #41789153 未加载

zoogeny7 个月前

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. <a href="https://github.com/muxinc/media-elements">https://github.com/muxinc/media-elements</a>

评论 #41782155 未加载

wallawe7 个月前

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 <a href="https://github.com/cookpete/react-player">https://github.com/cookpete/react-player</a>

评论 #41781910 未加载

miunau7 个月前

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.

评论 #41790461 未加载

评论 #41786032 未加载

dpedu7 个月前

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.

评论 #41782564 未加载

dnsbty7 个月前

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!

评论 #41782583 未加载

djhn7 个月前

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.

评论 #41789224 未加载

spankalee7 个月前

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

评论 #41780901 未加载

01jonny017 个月前

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.

0points7 个月前

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

thih97 个月前

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

评论 #41789515 未加载

andrewchilds7 个月前

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!

评论 #41781104 未加载

sgt7 个月前

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.

评论 #41791251 未加载

maelito7 个月前

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 ?

评论 #41780840 未加载

评论 #41780800 未加载

pglevy7 个月前

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.

评论 #41789323 未加载

评论 #41787666 未加载

troupo7 个月前

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!

redhippo7 个月前

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.

评论 #41783281 未加载

dfox7 个月前

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 ;)

评论 #41781474 未加载

danslinky7 个月前

Thank you for reminding me of Reelplay. I think.

评论 #41782252 未加载

elnova7 个月前

it really whips to llama's ass.

评论 #41790833 未加载

tomjen37 个月前

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

solomonb7 个月前

Any chance you can do foobar2000?

评论 #41781926 未加载

nimzoLarsen7 个月前

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

doubleorseven7 个月前

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 selectableAgain, thank you for this wonderful work

cebu_blue7 个月前

Clicked hide on this by accident on the front page.

pjmlp7 个月前

Love the idea, congratulations on the effort.

theblackdahlia7 个月前

I love MUX so much!

henning7 个月前

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.

评论 #41780770 未加载

评论 #41780976 未加载

评论 #41780824 未加载

phplovesong7 个月前

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?