大家好，我是 xy。
前端播放器领域，最近迎来了一次重磅更新！
诞生 16 年的老牌视频播放器 Video.js，正式发布 v10.0.0 稳定版！
这次更新有点猛。
Video.js、Plyr、Vidstack、Media Chrome、Mux Player，五大播放器项目背后的开发力量直接联手！
耗时一年，底层架构重新设计，还带来了一系列重大变化：
体积缩小约 60%全新组件化架构 支持 Vue、React、Web Components播放器 UI自由定制支持 AI Coding Agent支持 HLS、DASH等流媒体协议
这次真的是一次脱胎换骨的升级！
五大播放器，正式合体！
前端开发者对下面这些项目应该都不陌生。
Video.js：老牌 HTML5 视频播放器。Plyr：主打简洁漂亮的播放界面。Vidstack：现代化组件式视频播放器。Media Chrome：基于 Web Components 的媒体控件。Mux Player：面向流媒体场景的播放器。
据官方此前公布，这些项目累计拥有约 7.5 万 GitHub Stars，每月支撑数百亿次视频播放。
如今，五个项目的开发者汇聚到 Video.js 10，重新打造统一的播放器架构。
核心更新：体积暴降 60%！
这次升级最大的亮点，就是更轻量、更灵活。
官方 RC 阶段测试数据显示，相比 v8 默认完整包，v10 的打包体积缩小约 60%。
核心思路就是按需加载。
只需要基础的视频播放功能，就没必要引入直播、流媒体和各种高级控件。
用什么，装什么。
对于追求首屏加载速度的前端项目来说，还是非常实用的。
播放器 UI，彻底放开！
以前深度定制视频播放器，经常需要覆盖大量 CSS，甚至修改内部结构。
现在 Video.js 10 直接提供了全新的组件化皮肤系统。
官方提供了多套开箱即用的皮肤：
Default：现代毛玻璃风格。Neutral：简洁的纯色界面。Compat：兼容性优先的播放器样式。
更有意思的是，还能通过 shadcn 的方式将皮肤源码直接添加到项目。
播放按钮、进度条、音量控制、设置菜单，都能自由修改。
播放器 UI 真正实现高度定制。
如何快速使用？
新版针对 React 提供了原生组件，同时支持 Web Components。
先安装依赖：
npm install @videojs/react
然后引入组件：
import '@videojs/react/video/skin.css';
import {
VideoPlayer,
VideoSkin,
Video,
} from '@videojs/react/video';
export default function App() {
return (
<VideoPlayer>
<VideoSkin
style={{
width: '100%',
aspectRatio: '16 / 9',
}}
>
<Video src="/video.mp4" playsInline />
</VideoSkin>
</VideoPlayer>
);
}
这样，一个带播放控件的视频播放器就完成了。
此外，新版还支持 HLS、DASH、YouTube、Vimeo、Mux 等多种视频来源。
更炸的是，AI 也能用了！
如今 AI Coding 越来越火，没想到 Video.js 也跟上了。
官方直接提供了面向 AI 编程助手的 Skill。
执行：
npx @videojs/cli agents skills
就可以按照引导安装。
有了这个 Skill，Codex、Claude Code 等工具就能更好地理解 Video.js 10 的组件 API 和开发规范。
通过自然语言，让 AI 帮你搭播放器、修改控件、配置播放功能。
对于习惯 Vibe Coding 的开发者来说，又多了一个省事的选择。
写在最后
从 2010 年诞生，到如今发布 v10，Video.js 已经走过 16 年。
这次五大播放器项目的开发力量联合，确实带来了不少变化。
更轻量、组件化、UI 自由定制，还支持 AI 编程。
不过需要注意，v10 属于架构重写，并不兼容所有 v8 API，老项目升级前建议先看官方迁移指南。
对于准备开发视频类应用的同学，还是非常值得体验的。
相关链接：
官网： https://videojs.org/发布公告： https://videojs.org/blog/videojs-10