Show HN: I took back Video.js after 16 years and we rewrote it to be 88% smaller

Today we’re excited to release the Video.js v10.0.0 beta. It’s the result of a rather large ground-up rewrite, not just of Video.js (discussion) but also of Plyr, Vidstack, and Media Chrome, through a rare teaming-up of open source projects and people who care a lot about web video, with a combined 75,000 github stars and tens of billions of video plays monthly.

I built Video.js 16 years ago to help the transition from Flash to HTML5 video. It’s grown a lot since then with the help of many people, but the codebase and APIs have continued to reflect a different era of web development. This rebuild modernizes the player both for how developers build today and sets up the foundation for the next significant transition to AI-augmented features and development.

We’ve focused on:

• Shrinking bundle sizes, and then shrinking them more (88% reduction in default bundle size)
• Allowing deep customization using the familiar development patterns of your chosen framework — including new first-class React, Typescript, and Tailwind support
• Making the defaults look beautiful and perform beautifully
• Designing the codebase and docs so AI agents building your player alongside you can actually be good at it

** HTML **

<video-player>
<video-skin>
<video src="video.mp4"></video>
</video-skin>
</video-player>

** React **

import '@videojs/react/video/skin.css';
import { createPlayer } from '@videojs/react';
import { videoFeatures, VideoSkin, Video } from '@videojs/react/video';
const Player = createPlayer({
features: videoFeatures,
});
function App() {
return (
<Player.Provider>
<VideoSkin>
<Video src="video.mp4" />
</VideoSkin>
</Player.Provider>
);
}

Bundle

One of the biggest complaints about video players today is their file size, often weighing in around 1MB minified and hundreds of KB gzipped. The Video.js v10 default player is now ** 88% smaller ** than the size of the previous version’s (v8.x.x) default.

| player | minified (kB) | gzip (kB) | |---|---|---| | Video.js v8 (core) | 260.5 | 75.2 | | Vidstack | 237.4 | 74.1 | | Media Chrome | 175.5 | 41.3 | | Plyr | 109.8 | 32.6 | | Video.js v10 Video Player [HTML] | 97.4 | 25.1 | | Video.js v10 Video Player [React] | 62.0 | 18.0 |

v10 Engine (vroooom)

As part of v10 we’ve started a new engine project called SPF (Streaming Processor Framework), which is a framework built around functional components that are composed into purpose-built, smaller streaming engines.

| engine | minified (kB) | gzip (kB) | |---|---|---| | hls.js | 503.4 | 155.9 | | HLS.js-light | 328.5 | 103.4 | | SPF-composed engine | 38.5 | 12.1 |

In v10 we first split State, UI, and Media into their own components that work together through API contracts instead of monolithic controllers. The library is built for composing a player with only what’s needed, allowing for simple use cases to be even smaller.