When I started 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. I thought I was unlocking the creativity of other devs and I was excited to see what they might build.
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, no amount of effort I put into Video.js was going to fix this, because in 2010 there was no standard way to build UI components for the browser, and no one had time to learn another UI framework just for the sake of styling their player. Now however, we have React, a super dominant web app UI framework, and at a lower level, we also have Web Components, which allow you to extend the browser’s native UI components (HTML elements).
This is why we built Media Chrome which has both Web Components and React Components for building video player UIs. It solves the hard logic of building a player while allowing developers to work with components that feel familiar and consistent with their app’s UI framework. Instead of trying to be a player, Media Chrome just makes it really easy to build one yourself, exactly as you want it to look. Media Chrome is already in use on sites like TED.com, Syntax.fm, and on the hundreds of sites that use Mux Player.
What we’re launching today is Player.style — which on the surface is just a collection of Media Chrome themes. We hope you can find a theme you love, customize it, and take inspiration from all of the themes that Mux and others have put a lot of work into. Maybe even submit your own theme to share with others.
At the same time, however, Player.style is a demonstration of the flexibility of the Media Chrome ecosystem. Every media player theme can work with every major web player, and across every major web UI framework. No video player has ever been this universally compatible. This is mostly thanks to Web Components which allow Media Chrome to sit at a level below web frameworks, along with some light wrappers to make it as easy as copying and pasting into your project.
Best yet (in my opinion), each theme allows you to customize anything in it using just HTML and CSS, with no additional UI component framework to learn. Will this finally unlock the creativity I was aiming for back in 2010? I guess we’ll see.
I can’t wait to hear your feedback so please don’t hesitate to drop a comment in the github repo issues.
