OuonnkiTV：一键搭建个人影视站，支持多源导入与Vercel自动部署

OuonnkiTV概览

OuonnkiTV 是一个由 React + Vite + TypeScript 构建的现代化前端，用于聚合搜索与播放网络视频资源。项目在 LibreSpark/LibreTV 的基础上重构与增强，带来更清晰的模块化架构、更顺手的交互体验和更稳健的状态管理。支持跨端播放、搜索与观看历史、按需配置多个视频源，并可在 Vercel 上快速部署个人影视站。

适用人群

• 希望零后端一键搭建个人影视站的站长
• 需要聚合多视频源并统一搜索/播放的开发者
• 关注前端性能优化与状态管理实践的学习者

在线演示：https://tv.ouonnki.site/

GitHub 源码：https://github.com/Ouonnki/OuonnkiTV

OuonnkiTV核心特性

• 实时搜索提示：支持历史记录与联想建议，提升检索效率。
• 流畅播放体验：基于 xgplayer，支持 HLS / MP4。
• 清晰内容页：标题、封面、简介结构化呈现。
• 自动历史追踪：观看与搜索历史自动保存，可一键清理。
• 多源批量导入：文件、JSON 文本、URL 三种方式导入视频源。
• 个性化设置：主题与偏好可配置。
• 性能优化策略：代码分割、缓存与按需加载协同提速。
• 响应式适配：移动与桌面端自适应布局。
• 稳健状态管理：基于 Zustand，数据结构清晰、维护成本低。

视频源导入与管理

支持的导入方式

• 本地文件导入（📁）：拖拽或选择 JSON 文件，自动校验格式。
• JSON 文本导入（📝）：直接粘贴配置，提供实时语法检查与多行格式化。
• URL 导入（🌐）：从远程地址获取配置，支持 GitHub、Gitee 等代码托管平台，并自动处理网络请求。

JSON 基本格式

[
  {
    "id": "source1",
    "name": "示例视频源",
    "url": "https://api.example.com/search",
    "detailUrl": "https://api.example.com/detail",
    "isEnabled": true
  }
]

字段说明

• id：源的唯一标识符（可选，系统可自动生成）
• name：视频源显示名称（必需）
• url：搜索 API 地址（必需）
• detailUrl：详情 API 地址（可选，默认与 url 相同）
• isEnabled：是否启用该源（可选，默认 true）

支持的 JSON 形态

• 单个对象：{"name":"源名称","url":"API地址"}
• 对象数组：[{"name":"源1","url":"API1"},{"name":"源2","url":"API2"}]
• 多行格式化 JSON 与紧凑单行 JSON

导入流程

1. 进入设置页（右上角设置图标）
2. 点击“导入源”
3. 按需选择：文件导入 / 文本导入 / URL 导入
4. 点击“开始导入”
5. 查看结果提示：展示成功导入数量并自动关闭弹窗

导入体验优化

• 自动去重：重复源会被过滤
• 数据验证：校验 JSON 格式和必需字段
• 错误提示：提供可定位问题的详细信息
• Toast 通知：实时反馈导入进度与结果
• 批量处理：一次导入多个视频源

技术栈与性能

• 前端栈：React + Vite + TypeScript
• 播放器：xgplayer（HLS / MP4）
• 状态管理：Zustand
• 性能策略：代码分割、缓存命中与按需加载，配合响应式布局，带来更快的首屏与交互响应

OuonnkiTV部署与演示

在线演示：https://tv.ouonnki.site/

GitHub 源码：https://github.com/Ouonnki/OuonnkiTV

部署建议：支持在 Vercel 自动部署，适合个人快速上线与迭代

原文链接：https://www.ahhhhfs.com/75467/