What?

Yes, this is a real thing. The image you see above is actually how videojs-plyr looks like out of the box, minus the font. It's 100% CSS, with absolutely no JavaScript, and it has integration with the VJS plugins videojs-contrib-quality-menu and videojs-sprite-thumbnails.

Why?

Because Plyr is a very beautiful player, but doesn't work great under the hood, especially when it comes to livestreams. Video.js, on the other hand, doesn't look good with any of its default themes, but definitely works better under the hood.

I would know, as the maintainer of the web-based Italian IPTV client Zappr. Italy, being a country where linear television is the preferred video viewing platform for 70% of people, is home to A LOT of television channels, national and regional, which obviously distribute their live and OTT content in very different and unique ways.

I've seen it all. And while Plyr is a great player that can cover 99% of use cases, Zappr needed one that could support 100%, while still looking good. So, since there wasn't a better solution, I built this.

So, yes, this is probably not for you...

Unless you need a player that has to flawlessly support all the wacky use cases that come with providing the live and OTT content of over 1500 TV channels, this isn't for you. Which is to say, it almost certainly isn't for you.

If you like the look of Plyr, just use it. Or better yet, use its successor, Vidstack: it's still maintained, it has a built-in Plyr theme, and everything is very modular and customizable.

Installation

You can install videojs-plyr from NPM, using your favorite package manager:

npm install videojs-plyr

<link rel="stylesheet" href="node_modules/videojs-plyr/css/videojs-plyr.min.css">

Alternatively, you can import it directly via a CDN like jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-plyr/css/videojs-plyr.min.css">

Then, to use it, simply add a vjs-theme-plyr class to your Video.js element:

<video class="video-js vjs-theme-plyr"></video>

Now, there are some menu items/titles you might want to translate into other languages. To do that, simply change the value of these CSS variables:

--videojs-plyr-quality-text: "Quality";
--videojs-plyr-captions-text: "Captions";
--videojs-plyr-audiotracks-text: "Audio track";
--videojs-plyr-subtitles-disabled-text: "Disabled";
--videojs-plyr-settings-text: "Settings";
--videojs-plyr-playback-speed-text: "Speed";

Finally, if you're using Video.js version 8.9.0 or newer, I recommend enabling the option enableSmoothSeeking by setting it to true. This will make it so, when clicking and dragging on the progress bar, the playhead will follow your mouse smoothly, instead of doing so choppily like it does by default.

You can do so while initializing the player:

videojs("video", {
    enableSmoothSeeking: true,
});

Or programmatically:

let player = videojs("video");
player.options({ enableSmoothSeeking: true });

Variants

The css folder contains 4 CSS files, those being the normal and "legacy" versions of the library, in both unminified and minified formats. The legacy version has way better support for old browsers, but is a bit heavier (because it's made with postcss-preset-env set to a Browserslist query of > 0%).

• videojs-plyr.css - Regular unminified version
• videojs-plyr.min.css - Regular minified version
• videojs-plyr.legacy.css - Legacy unminified version
• videojs-plyr.legacy.min.css - Legacy minified version

License

videojs-plyr is licensed under the GNU General Public License v3.0. Which means you can do whatever you want with this project except distribute closed source versions of it.