Video.js v10 Beta: Hello, World (again)
背景
Video.js 16年前为帮助从Flash过渡到HTML5视频而构建，如今团队宣布发布v10.0.0 beta——这是与Plyr、Vidstack、Media Chrome合作的大规模重写，合计75,000+ GitHub stars和数十亿次月度视频播放。
核心亮点
- 88%体积缩减：默认bundle从260KB降至97KB (gzip: 75KB→25KB)
- 新引擎SPF：简单HLS场景仅12%文件体积(对比HLS.js-light的328KB降至38KB)
- 分离State/UI/Media组件，feature按需加载(类似Zustand slices模式)
- AI agent友好设计：为LLM构建的player可被正确理解和修改
- 全新一线React、TypeScript、Tailwind支持
- Sam Potts(Plyr作者，29k stars)设计全新皮肤
Bundle大小对比
| Player | minified (KB) | gzip (KB) |
|---|---|---|
| Video.js v8 (core) | 260.5 | 75.2 |
| Plyr | 109.8 | 32.6 |
| Video.js v10 Video [HTML] | 97.4 | 25.1 |
| Video.js v10 Video [React] | 62.0 | 18.0 |
| Background Video + SPF [React] | 49.2 | 15.6 |
流媒体引擎对比
| Engine | minified (KB) | gzip (KB) |
|---|---|---|
| dash.js | 962.1 | 294.2 |
| Shaka | 753.0 | 239.1 |
| HLS.js | 503.4 | 155.9 |
| VHS (v8) | 434.4 | 127.6 |
| SPF (v10) | 38.5 | 12.1 |
架构创新
- 组件化设计：State、UI、Media分离，通过API合约协作
- 64KB大页面：替代传统4KB，减少S3请求数
- Seekable压缩：每页面组编码为多个zstd帧，支持范围GET
- Query-plan预取：通过EXPLAIN QUERY PLAN预测并预取所需页面
- AI友好：unstyled UI primitives，类似Radix/Base UI
意义
这是Web视频播放器领域的重大里程碑——不仅代表体积的极致精简，更代表面向AI agent开发范式的重要转变。重写不仅是代码层面的现代化，更是对"AI时代如何构建web组件"的回答。