🤔 Why bother?
In 2016, while working at Selz, we were building some video-based features for the product so I started looking for a suitable open source player we could use. We had some fairly basic requirements:
- Accessible - It had to be screen-reader friendly, easy to use with keyboard navigation and support webvtt subtitles. The native players were surprisingly a little behind in terms of a11y.
- Easy to customize - The nature of the Selz business (building ecommerce websites) meant we had to be able to easily customize the look and feel of it to work with different themes. I’m also quite particular when it comes to how I like things to look 😂.
- Lightweight - This is a given nowadays but we wanted to keep things fast.
There were alternatives at the time (Video.js and MediaElement) but unfortunately while both were great players, neither really met our requirements so I decided to have a go myself. How hard could it be? 😁
v1.0
I started off by adapting an accessible video player that PayPal had built (sadly, it no longer exists so I can’t link it). This was a simple designed player that gave me some great inspiration to use when building out v1.
Our original requirements were just for HTML5 <video> and <audio> so that’s all I supported in the first version. It was less than 3Kb gzipped. February 2015, I threw it on GitHub and npm, started using it on Selz and didn’t think much of it.
🚀 Growth
The meteoric rise was kicked off mainly due to being featured in two fairly popular places on the internet.
Hacker News
On March 3 2015, someone posted Plyr on Hacker News and it seemed to go down quite well, resulting in a lot of traffic to the site and GitHub repo. I woke up the following day to an extra ~1,500 stars on GitHub and a bunch of issues and pull requests for new features. I guess it was something a lot of other folks also wanted which is often to the key to success in open source. I came to the conclusion I should start building some more features!
Product Hunt
About a year later in May 2016, Plyr was posted to Product Hunt and got a similar response to that of Hacker News. It was around this time that I started to see a lot of people using it in the wild and I started to get a lot of requests for new features, including support for YouTube and Vimeo.
Why was it popular?
Based on the feedback I had over the years, it’s usually a combination of factors:
- It’s reasonably small (more so in the beginning!) and performant.
- It’s easy to implement - Single JS & CSS files (or use the CDN) and a line or two of JavaScript and you’re up and running.
- Easy to customize - it’s built with CSS variables so you can easily change the look and feel.
- It’s accessible - it’s screen-reader friendly, easy to use with keyboard navigation and supports webvtt subtitles.
- It looks polished (if I do say so myself!) with some nice interactions.
🧑💻 Development
Over the years I added all sorts of new features:
- YouTube & Vimeo support
- UI refreshes
- Picture in Picture support
- Multiple caption languages
- Quality control (for HTML5)
- and much much more.
The problem was this meant the originally single plyr.js file was now a bit of a monster and it was time to break the file down and have a re-think. At this point if someone suggested a new feature and I thought it was a good idea, I’d just build it in. This meant that everyone would get every feature in the bundle, even if they didn’t need it. Ideally, I’d have a way to let people pick and choose what they wanted and let tree-shaking do the rest. At the time, ES modules were gaining traction and I thought it was a good time to start using them.
For version 3, I had planned to break the player down into smaller ES modules to allow for tree-shaking. I also wanted to make it easier to extend and customize the player through a plugin system. This work was slow going and I really didn’t know the best way to tackle it. In the interest of time, I decided to make v3 a stepping stone to this and just focus on the ES modules to make the DX better if nothing else.
What’s next?
Since starting work on Plyr, we’ve had two boys and I simply don’t have the spare time I had before. That means projects like this just sit on the back burner and I struggle to devote time to them. Even building my own site took me years! I had been propping up Plyr and fixing major bugs but really not adding anything new. I would have expected the growth to tail off but it really hasn’t oddly. I think it’s a testament to the fact that it’s a good product and it’s still solving a problem for some people.
I’ve got to the point where I want to completely rebuild the player. Why?
- TypeScript - It’s simply a better DX in my opinion and I’m all for that.
- Web Components - They’re perfect for something like this. They also help with style encapsulation which was often an issue for users.
- Plugins - I want to make it easier for people to extend and customize the player so I don’t have to build every feature in.
- Modern UI - This is the bit I love fiddling with the most and I think where most users found the most value in Plyr.
- Reactivity - Plyr currently uses way too much
document.createElement(seecontrols.js!) and using a proper UI library with reactivity would be a big win.
but given I don’t have the time to do that, I looked around for help. I had noticed a new player called Vime that looked exactly where I wanted to take Plyr. It was using Web Components, written in TypeScript and just had a much more modern feel than Plyr. I reached out to the creator, Rahim Alwer to see what he thought about working together on a player.
😎 Notable users
Over the years, some big sites have used Plyr:
- BBC
- SpaceX
- Toyota
- Peugeot
- Bloomberg