想架设一款适配TV，端和移动端的视频播放Web应用。今天影视资源坊就给各位分享这个超实用的开源项目——OuonnkiTV。它基于现代前端技术栈构建，关键聚焦视频播放感受调优和交互设计，还使用Apache License 2.0开源协议；不管是学习借鉴仍是二次开发都很友好，多终端适配的特性也能符合不同场景的使用诉求。
OuonnkiTV，的技术选型都是当下前端领域的主流方案。既保证了开发效率。又能兼顾代码质量和运行表现，关键技术栈特征见下：
前端框架，使用React 19.1.0 + TypeScript组合，TypeScript能保证代码的种类安全，大幅降低后期维护成本；
构建工具：使用Vite 6.3.5；相比传统构建工具，能提供极速的开发热更新和打包构建效率，开发感受拉满；
样式方案：基于TailwindCSS 4.1.8实现原子化CSS开发，不用写冗余的样式代码，样式开发效率更高；
状态管理，选用Zustand 5.0.5，轻量又高效，相比繁琐的状态管理库，学习成本低、运行表现更好；
UI组件与图标，集成Radix UI系列组件（涵盖弹窗、选择器、提醒框等），兼顾可浏览性和视觉感受，搭配Phosphor/Lucide图标库，UI表现更多样；
视频播放关键：整合artplayer（5.3.0）、hls.js（1.6.15），不仅能实现基础的视频播放控制，还兼容HLS流媒体播放，符合高清视频播放诉求；
部署适配：兼容Vercel、Netlify、Docker等多平台部署；还内置了Vercel分析/测速插件，方便监控应用运行状态。
针对TV端和移动端做了专属适配；保证不同设备体验统一：
- 移动端通过viewport设置 + 手势拦截禁用缩放；避免误操作；和TV端交互逻辑保持一致；
- 基于react-device-detect做设备种类判断，手动适配不同终端的UI布局和交互逻辑；不用单独开发多套代码。
关键的视频播放功能符合日常和专业场景诉求：
- 依托hls.js兼容HLS（m3u8）流媒体播放，适配各种高清视频源；
- 集成artplayer专业播放器，提供完整的播放控制能力，含播放/暂停、进度调节、音量控制等基础操作，符合日常播放诉求。
在交互和视觉层面做了大量调优，让应用使用更顺畅：
- 基于dnd-kit实现拖拽排序功能，操作更灵活；
- 使用embla-carousel实现轮播组件，兼容手动播放，适配主页推荐等场景；
- 通过framer-motion实现多样的动画效果，提升交互过程中的视觉感受；
- 集成Radix UI组件库，实现无障碍、高表现的弹窗、下拉菜单、提醒框等交互组件，兼顾不同用户的使用诉求。
工程化设置齐全，部署方式灵活多样：
- 兼容Docker容器化部署，提供docker:build/up/down等脚本，一键构建和启停容器
- 适配Vercel部署，通过vercel.json设置路由重写；完美适配React路由；
- 内置GitHub Actions手动同步上游代码；保证分支代码一致性
- 集成ESLint、Prettier、TypeScript做代码质量控制，规范开发环节；
- 兼容Vitest单元实测，方便验证代码功能，降低bug率。
除了关键功能，还有不少实用的附加能力
- 集成TMDB接口（tmdb-ts）；可对接影视数据，多样视频信息来源；
- 基于react-hook-form + zod实现表单校验，适配登录、设置等表单场景；
- 兼容主题切换（next-themes），符合不同视觉偏好；
- 集成Vercel Analytics/Speed Insights，监控应用表现和用户浏览数据，方便调优迭代。
首先要符合基础的环境要求，与此同时完成代码克隆：
- 环境要求：Node.js ≥ 20.0.0pnpm ≥ 10.15.1（项目指定的包管理器，推荐严格匹配版本）；
- 克隆仓库：
git clone https://github.com/Ouonnki/OuonnkiTV.gitprepreprepreprepreprepreprepreprepreprepre
- 进入项目文件夹：
cd OuonnkiTVprepreprepreprepreprepreprepreprepreprepre
1. 部署依赖
pnpm installprepreprepreprepreprepreprepreprepreprepre
2. 开发环境运行
pnpm devprepreprepreprepreprepreprepreprepreprepre
开启后预设监听本地所有IP，可通过 http://localhost:5173浏览（Vite预设端口）；
3. 构建生产包
pnpm buildprepreprepreprepreprepreprepreprepreprepre
构建时会先执行@ouonnki/cms-core包的构建；再编译TypeScript并通过Vite构建生产代码；最终输出到dist文件夹。
4. 预览生产包
pnpm previewprepreprepreprepreprepreprepreprepreprepre
可在本地预览构建后的生产代码，验证打包效果。
5. Docker部署
# 构建Docker镜像 pnpm docker:build # 启动容器（后台运行） pnpm docker:up # 停止容器 pnpm docker:down # 查看容器日志 pnpm docker:logsprepreprepreprepreprepreprepreprepreprepre
6. 代码质量核对
# ESLint检查 pnpm lint # 单元测试 pnpm testprepreprepreprepreprepreprepreprepreprepre
Vercel部署
1. 将代码推送到GitHub仓库，
2. 在Vercel控制台导入该仓库，Vercel会手动读取vercel.json设置，使用pnpm部署依赖并构建；
3. 部署后手动处理路由重写（所有请求指向index.html）；适配React路由。
其他部署方式
- 生产构建后（执行pnpm build）；将dist文件夹部署到任意静态服务器（Nginx/Apache/Netlify等）就能；
- 若需自定义接口代理，可借鉴vercel.json中的/proxy路由设置，对接后端接口。
1. 项目依赖@ouonnki/cms-core本地包（workspace:*），需确保packages/cms-core文件夹存在且依赖部署齐全；
2. 若修改代码后需同步上游仓库，可人为触发GitHub Actions的Sync Upstream (Force Mirror】工作流
3. 移动端缩放禁用可能影响视力障碍用户的可浏览性，若需调整可修改index.html中的viewport设置和gesturestart事件拦截逻辑；
4. 项目使用Apache License 2.0协议。二次开发/分发需遵循协议要求（保留版权声明，LICENSE文件等）。
