【Hacker News搬运】显示HN:Winamp和其他媒体播放器，使用web组件为web重新构建

hackernews

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

显示HN:Winamp和其他媒体播放器，使用web组件为web重新构建

Text: 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.

大家好，Video.js的创建者和Mux&amp；Zencoder在这里。我和我的团队建造了这个。我希望你喜欢我们迄今为止构建的主题，甚至可能受到启发来构建自己的主题<p> 我知道Web Components现在正处于一个戏剧性的循环中。我很高兴看到他们真的受到了关注。自从2013年我开始与他们合作以来，我一直非常看好他们，至少在像视频播放器这样的<I>小部件</I>的背景下是这样。我甚至做过很多类似这样的相关演讲（<a href=“https:”www.youtube.com“watch？v=N6Mh84SRoDg”rel=“nofollow”>https:“www.youtube.com`”watch？v=N6Mhh84SRoDg</a>）<p> 我永远不会把它们用于大型应用程序或作为React的完全替代品，但它们在制作跨多种环境兼容的视频播放器方面令人难以置信，当你进入嵌入主题的步骤时，Player.style就是一个很好的证明。Web组件在构建可以在项目之间共享的UI方面非常出色。它们也是避免长期JS框架冲击的最佳方式，这对任何在网络上工作足够长时间的开发人员来说都是一个挑战。我为Video.js做过的最好的决定之一是<I>而不是</I>用jQuery构建它。Video.js已经有15年的历史了，仍然在使用，而所有的jQuery播放器都没有<p> 对于这个项目的一些额外背景，早在2010年我构建Video.js时，我就对其他开发人员如何定制播放器控件进行了大量思考。我很高兴能使用web技术（而不是Flash）来构建一个播放器，我知道其他web开发人员也会这样做<p> 时光飞逝14年，Video.js已被用于数百万个网站，包括推特、Instagram、亚马逊、Dropbox、领英，甚至联合航空公司的头枕。在99.99%的情况下，默认的Video.js控件几乎没有定制。所以…巨大的收养成功，在激发创造力方面彻底失败。回想起来，要求人们学习一个新的UI框架来设计他们的播放器太过分了<p> Media Chrome和Player.style是我对这种摩擦的回应<p> Media Chrome-一套Web组件和React组件，让您可以使用您已经熟悉的组件从头开始轻松构建媒体播放器UI<p> -Player.stye-使用Media Chrome构建的主题，展示了Media Chrome的跨播放器和跨框架灵活性。<p>Media Chrome已经在TED.com、Syntax.fm等网站以及使用Mux Player的任何地方使用。在过去的几个月里，我们为Player.style构建了一些很棒的主题。我可能最有趣的是使用SVG和CSS从头开始重新创建Youtube图标动画。（无论谁制作了原创作品，都做得很好！）<p>这都是免费和开源的，所以如果你对这个项目感兴趣，不要犹豫。当然，我很乐意回答任何问题。

hn link

Url: https://player.style

很抱歉，但您提供的链接 "https://player.style" 不是一个有效的网页链接，因此我无法直接访问该网页内容。JinaReader 是一个文本分析工具，但我无法直接在这个平台上运行它来抓取和分析内容。

如果您能提供具体的内容或者网页的文本内容，我可以尝试帮助您进行文本分析，包括内容抓取、分析以及如果需要的话，将非中文内容翻译成中文。请提供需要分析的内容文本。

Post by: Heff

Comments:

phplovesong: 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?

phplovesong: 非常好 看到这样的工作正在进行，令人耳目一新。现在，所有的框架作者都对web组件和喷涌而出的东西非常狂热；th3y suCk”；以及&quot；w3成分是未来的3&“；。只是胡说八道。WC允许比任何反应式框架更好的可重用性，并且是通用的。你几乎可以用它们做任何事情。现在的炒作列车似乎是在SSR上，它简直疯了，就像我们自90年代以来就有服务器端渲染的WTF一样，然后一切都是关于SPA的；s、现在他们想用SSR重新实现PHP时代的网站，让你几乎被nodejs锁定 我每天都会对一个臃肿的npm安装的react项目进行WC，该项目有2345个依赖项。一个今天有效的厕所在2036年也会同样好，甚至更好。你的反应能做到吗？

zoogeny: 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>

zoogeny: 我喜欢这背后的想法，谢谢你让它成为麻省理工学院的许可证 我只是碰巧在开发一个媒体应用程序（视频编辑器），之前我已经构建了一些视频播放器（Flash和HTMLJS）。实际上，我们试图在一个播放器上使用web组件（早在2015年左右），它们是一个持续的痛苦，我们最终放弃了它，转而使用普通的旧JavaScript。奇怪的是，对于我目前的媒体应用程序，我；我一直在使用网络组件（例如视频编辑器时间线），到目前为止进展顺利。我；我不确定发生了什么变化，也不确定网络的缓慢发展是否带来了足够的兼容性，使其可行 我；我刚刚浏览了Media Chrome文档，只快速浏览了github仓库，但我喜欢你的设计原则和架构说明。我对采用这样的东西的主要担忧（特别是因为我有很多从头开始构建这样东西的经验）是可扩展性（例如，修改我的时间线组件以适应MediaController范式有多难）和文件大小。自己做所有事情的一个优点是，你拥有所需的一切，仅此而已。我；我确信Media Chrome有很多我刚刚赢得的东西；不需要（但其他人会）-问题是我会为我不会做的事情承担多大的负担；永远不要使用。不仅仅是我赢得的组件；我不会使用我将使用的组件中未使用的功能。有时，这只是现有的不必要功能阻碍了较低级别的可扩展性 顺便说一句，你的“媒体元素”仓库[1]没有许可证文件。我在package.json中看到，元素也是MIT，但有一个明确的LICENSE文件总是很受欢迎的 话虽如此，这是一个非常诱人的图书馆。至少我可能会窃取将我的组件包装在类似媒体控制器的元素中的想法，因为我；到目前为止，我一直在使用包含页面将我的元素拼接在一起，我想要一个更好的抽象 1<a href=“https:&#x2F；/ github.com&#x2F-muxinc&#x2F/媒体元素”>https:&quot&#x2F；github.com；muxinc；媒体元素</a>

wallawe: 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>

wallawe: Mux的营销策略非常出色 接管或创建新的开源项目，这样每个开发人员在寻找视频包时都会遇到你的公司 我最近注意到的另一个例子是<a href=“https:”github.com“cookpete”react-player“>https:”&#x2F；github.com；cookpete；反应玩家</a>

dnsbty: 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!

dnsbty: Player.style太棒了 在我上一次创业时，我开始构建自己的video.js主题，几个小时后我意识到它可能不是；不值得我花时间，还坚持违约。展望未来，这些主题将为我提供一个更好的起点，让我做一些更个性化的事情 谢谢分享！

dpedu: 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.

dpedu: 那里；这里的焦点有些奇怪，希望这能被视为建设性的批评。它们都有同样的问题：当你点击视频本身时，左右箭头键会前后拖动视频。上下什么都不做 当您单击洗涤器时，左右箭头键停止工作。此外，上下箭头键开始工作以倒带；将视频提前不同的时间 如果您在空白处单击，例如在Winamp示例上或在Reelplay示例上看起来像窗口98的蓝色条上，这两个控件都会停止工作，以及播放空间；暂停 macos上的最新chrome。