type
date
slug
status
summary
tags
category
password
icon
OuonnkiTV是一个现代化的、可扩展的视频搜索与播放前端应用。
核心技术栈
该应用基于 React 19、Vite 6 和 TypeScript 开发，并利用 TailwindCSS 4、Framer Motion 和 HeroUI 进行 UI 与动画设计。视频播放核心采用 xgplayer / xgplayer-hls，状态管理则基于 Zustand + Immer，时间处理使用 Day.js。部署方面，它支持 Vercel 托管与边缘加速。
主要功能
OuonnkiTV 提供多种功能来增强用户体验：
- 视频源导入：支持通过本地文件、JSON 文本和 URL 三种方式批量导入视频源，系统会自动验证格式、去重并提供错误提示。
- 实时搜索与播放：具备实时搜索提示、历史记录与建议联想功能，并能流畅播放 HLS / MP4 格式的视频。
- 观看历史记录：自动保存用户的观看和搜索历史，并支持清理。
- 个性化设置：用户可以配置主题和偏好设置。
- 响应式设计：应用布局能自适应移动和桌面设备。
- 性能优化：通过代码分割、缓存和按需加载等策略提升性能。
部署方式
用户可以通过以下方式部署 OuonnkiTV：
- 本地开发：克隆仓库，安装 Node.js (>=20.0.0) 和 pnpm (>=9.15.4) 依赖后，运行
pnpm run dev即可在本地启动。
- Docker 部署：支持使用 Docker Compose 或预构建镜像进行部署。
- 一键部署到 Vercel：提供了一键部署按钮，并有详细的手动部署指南，包括配置环境变量
VITE_PROXY_URL。此外，初始视频源也可以通过环境变量VITE_INITIAL_VIDEO_SOURCES进行预配置，支持直接 JSON 格式或指向 JSON 文件的 URL。
OuonnkiTV
Ouonnki • Updated Sep 20, 2025
- 作者:205066
- 链接:https://www.205066.xyz/article/OuonnkiTV
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
