北京
去年做副业项目时，我需要一个小型HLS视频播放器。需求很普通：支持.m3u8流媒体、干净的播放按钮覆盖层、可选的关闭按钮、桌面/移动端宽高比切换，还要能无缝塞进设计系统，别在Next.js App Router里报"ReactServerComponentsError"，也别逼着Nuxt 3用户手动配插件。
我试了主流方案，每个都差一点。react-player成熟但API偏向"给我URL和一大排控制栏"；video.js对嵌入场景太重，还自带一坨主题CSS跟Tailwind打架；plyr、vidstack颜值在线，要么体积超标，要么样式太强势。
真正烦人的是CSS污染。每个"开箱即用"的播放器都带全局重置、主题变量或*选择器，悄悄把你的按钮推偏1像素，或者重写表单边框。在设计系统里调了数周的细节，这种纸割伤忍不了。
于是我动手造了一个。又因为目标用户里一半用Vue，我造了两个：@glitchlab/react-video-player和@glitchlab/vue-video-player。今天都是v1.0.2，MIT协议，props接口一致，UI一致，CSS+JS压缩后不到4KB。在线演示地址：https://video-player-playgraound.vercel.app/
三个决策做了大部分工作。第一个是干掉全局CSS。初版用Tailwind v4，vite build --lib之后，dist/style.css有17KB，全是:root变量和*选择器重置。库文件往用户页面里注主题token，这是失职。我改手写CSS，所有样式锁在.gvp-root作用域下，没有:root，没有文档级*选择器。组件只管自己的子树。CSS从17KB压到2.8KB。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
