一键搭建个人影视站工具：OuonnkiTV

对于希望快速搭建个人影视站、聚合多个视频源并实现统一搜索与播放的用户，OuonnkiTV 提供了一个现代化前端解决方案。基于 React + Vite + TypeScript 构建，项目在 LibreSpark/LibreTV 基础上重构，优化模块化架构、交互体验和状态管理。支持跨端播放、搜索与观看历史管理，并可在 Vercel 上快速部署，满足站长和开发者的多样化需求。在线体验可访问 OuonnkiTV，源码地址为 GitHub。

OuonnkiTV 是什么？

OuonnkiTV 是一款现代化前端影视聚合平台，专为零后端环境下快速搭建个人影视站而设计。用户可以导入多个视频源，实现统一搜索、播放和历史管理。系统具备模块化结构、响应式布局与稳健的状态管理，适合站长、开发者及前端性能优化爱好者学习与使用。

开源地址：https://github.com/Ouonnki/OuonnkiTV

核心功能

OuonnkiTV 提供从搜索、播放到历史管理的完整前端功能：

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

使用场景

OuonnkiTV 适用于个人影视站建设、前端开发学习与视频内容聚合等场景。

操作指南

新用户可在几分钟内完成视频源导入与播放配置：

1. 打开 OuonnkiTV 并进入右上角「设置页」。
2. 点击「导入源」，选择文件导入（📁）、文本导入（📝）或 URL 导入（🌐）。
3. 填入或粘贴 JSON 配置，系统自动校验格式和必需字段。
4. 点击「开始导入」，查看成功导入数量提示。
5. 自动去重和错误提示确保导入质量，Toast 通知实时反馈进度。
6. 在内容页搜索或直接播放视频，历史记录会自动保存。
7. （注意）确保 JSON 配置包含 name、url 等必需字段以避免导入失败。

支持平台

OuonnkiTV 为纯前端解决方案，支持桌面、平板和移动端浏览器访问。可在 Vercel 一键部署，实现跨端统一访问。响应式布局保证不同设备上交互体验一致。

产品定价

OuonnkiTV 开源免费，用户可无限制导入视频源、搜索与播放，无需付费或注册。源码可自定义和二次开发，适合个人站长和开发者使用。

常见问题

Q1：支持哪些视频源导入方式？
A1：支持本地文件导入、JSON 文本导入和 URL 导入，可一次导入多个源。

Q2：观看历史是否自动保存？
A2：是，系统会记录搜索和观看历史，可随时一键清理。

Q3：部署是否需要后端？
A3：不需要，OuonnkiTV 为纯前端应用，可在 Vercel 等平台快速部署。

跳跳兔小结

OuonnkiTV 提供了一套完整的个人影视站前端方案，涵盖搜索、播放、多源管理和历史追踪等功能。其模块化架构、响应式设计和稳健状态管理适合站长快速搭建、开发者聚合多视频源以及前端学习者深入研究性能优化与状态管理。但不提供视频存储或后端服务，适合已有视频源或 API 支持的场景。