OuonnkiTV ：一键自建现代化影视聚合站

 

OuonnkiTV ：一键自建现代化影视聚合站（Vercel & Docker）

OuonnkiTV 是一个基于 React + Vite + TypeScript 的视频聚合前端，支持多视频源导入、跨端播放、历史记录、个性化设置，并可通过 Vercel 一键部署或 Docker 快速上线。实际上还是在LibreTV 的基础上进行的增强。支持和LibreTV一样的视频源的导入。

官网地址：Ouonnki/OuonnkiTV 

1. OuonnkiTV 是什么？

OuonnkiTV 是一个 “前端外壳 + 可配置数据源” 的现代化影视聚合应用：

  • ⚡ 技术栈：React、Vite、TypeScript、Tailwind、Zustand、xgplayer、Day.js。

  • 🧭 体验友好：搜索联想、观看/搜索历史、清空一键化。

  • 🧩 多源可配：支持 文件 / JSON 文本 / 远程 URL 三种导入；支持启动时通过环境变量预置。

  • 📱 跨端自适应：PC 与移动端布局均衡，长片单集/剧集列表清晰。

  • 🧹 轻内容立场：不存储视频，仅聚合第三方源结果用于展示与播放。

2. 快速上手（两种部署方案）

2.1 Vercel 一键部署（最轻量）

适合个人/小团队，零服务器运维；构建产物静态托管，接口经内置代理转发。

步骤一：导入仓库

  1. 打开 Vercel → New Project → 导入 OuonnkiTV 仓库（Fork 后更便于自定义）。

步骤二：设置构建命令

  • Install Command：pnpm install

  • Build Command：pnpm build

  • Output Directory：dist

步骤三：配置环境变量（核心）

  • VITE_PROXY_URL → /api/proxy?url=（用于统一代理第三方视频源）

步骤四：Deploy

  • 点击 Deploy，等待构建完成即可访问线上地址。

本地/Fork 仓库 → Vercel 导入 → 设置 Build/Env → Deploy → 访问站点

TIPS

  • 推荐 Fork 后在 Vercel 绑定 Fork 仓库，避免直接动上游。

  • 若需自定义域名，在 Vercel 的 Domains 面板添加即可。

2.2 Docker 部署（本地/服务器）

适合已有服务器或需内网部署的场景。

方式一：Docker Compose（推荐）

# 1) 可选：复制环境变量模板
cp .env.docker .env

# 2) 启动服务
docker-compose up -d

# 3) 访问
# http://localhost:3000

方式二：拉取预构建镜像

docker pull ghcr.io/ouonnki/ouonnkitv:latest

docker run -d -p 3000:80 \
  -e VITE_PROXY_URL=https://api.codetabs.com/v1/proxy?quest= \
  ghcr.io/ouonnki/ouonnkitv:latest


  • 浏览器 ⇄ Nginx(容器) ⇄ 代理路径 /api/proxy?url= ⇄ 第三方视频源 API

TIPS

  • 服务器需放行 80/443 端口（或自定义映射）。

  • 建议搭配反向代理与 HTTPS 证书（Caddy / Nginx / Traefik）。

3. 本地开发与二次定制

适合换皮肤、改交互、接入你的业务逻辑。

前置环境：Node.js ≥ 20，pnpm ≥ 9.15.4

git clone https://github.com/Ouonnki/OuonnkiTV.git
cd OuonnkiTV
pnpm install

# 开发
dpnm run dev   # http://localhost:3000

# 生产构建 + 预览
pnpm run build
pnpm run preview # http://localhost:4173

可定制点

  • 主题与样式：Tailwind 原子类；可加入动效（Framer Motion）。

  • 状态管理：Zustand；数据结构扁平，易扩展。

  • 入口配置：src/config/*、开发代理/中间件：api/proxy.ts。


src/
  components/
  pages/
  store/        # Zustand 状态
  config/       # 全局配置
  assets/
api/
  proxy.ts      # 统一代理逻辑

4. 视频源管理：三种导入方式 + JSON 规范

OuonnkiTV 在设置中提供 文件导入 / JSON 文本 / 远程 URL 三种方式，内置格式校验、去重与错误提示。


最小可用 JSON

{"name": "示例源", "url": "https://api.example.com/search"}

标准数组示例（含可选字段）

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

字段说明

  • name / url：必填；

  • detailUrl：可选，缺省与 url 相同；

  • isEnabled：可选，默认 true；

  • id：建议提供，便于去重与开关控制。

注意：若通过 URL 导入，请确保该地址可直出 JSON，且允许被代理访问。

5. 预置视频源：环境变量一键注入

适合“开箱即用”，部署时直接写入一组默认源。

在部署环境中设置：VITE_INITIAL_VIDEO_SOURCES（值为 JSON 字符串）。

示例（Vercel 环境变量或 .env）

[
  { "id": "source1", "name": "示例源1", "url": "https://api.example1.com", "isEnabled": true },
  { "id": "source2", "name": "示例源2", "url": "https://api.example2.com", "detailUrl": "https://detail.example2.com", "isEnabled": false }
]


6. 播放体验与交互亮点

  • 🎬 播放器：基于 xgplayer，支持 HLS/MP4；倍速、进度记忆等常用控件齐全。

  • 🧭 检索链路：搜索 → 结果列表 → 详情页 → 播放页，路径清晰；

  • 🧹 历史记录：自动记录观看与搜索条目，一键清空；

  • ⚙️ 个性化：主题色、默认播放偏好可视化配置。


  • 搜索页：关键词与历史联想；

  • 详情页：封面、标题、简介、分集；

  • 播放页：播放器 + 集数列表 + 返回入口。

7. 常见问题（FAQ）

Q1：Vercel 构建后访问为空白？
A：核对 VITE_PROXY_URL 是否为 /api/proxy?url=；并检查你的第三方视频源是否可达。

Q2：如何既保留我的改动、又能跟上游同步？
A：把自定义放在 custom/* 或独立分支；上游同步时只更新 main。也可使用 GitHub 的 Sync fork 或定时脚本。

Q3：播放器不支持某些格式？
A：默认支持 HLS/MP4，其他格式取决于浏览器与数据源。可在 xgplayer 生态内寻找插件或转码方案。

8. 合规与版权声明

  • 本项目 不存储、上传或分发 任何视频，仅做 第三方来源聚合与展示；

  • 若涉及侵权，请联系 原始内容提供方 处理；

  • 部署与使用产生的法律风险 由使用者自行承担，请遵守当地法规与平台条款。



评论

发表评论

此博客中的热门博文

LibreTV:又一个开源跨平台影视

图片
 上次介绍了个跨平台的影视平台 MoonTV  ，这次又发现一个很像的。查了以下资料发现反而是这个更早。据介绍，MoonTV 是在 LibreTV 的基础上 改进和优化 的一个开源项目。两者使用了相同格式的播放源API，因此可以互用。LibreTV 更加轻量。虽然MoonTV功能更加多，不过你也可以试试LibreTV。 github地址： 点击进入 同样，该系统支持Cloudflare Pages和Vercel，以及vps（docker）的部署方式。 这次演示的是Cloudfare Page方式的搭建 1.点击链接，进入Github，Fork该项目 Github链接 ： https://github.com/LibreSpark/LibreTV?tab=readme-ov-file 2. 打开Cloudfare page ，创建一个项目 3.链接到你的github中的libreTV项目 4. 设置相关配置，包括登录密码 5. 开始部署 6.部署成功，通过二级域名访问，如果被墙就要绑定自己的域名
阅读全文

【实测】白嫖 Google Colab T4 跑阿里的“造相” (Z-Image-Turbo)，竟然还能开 WebUI？

图片
最近 AI 绘图圈子又热闹了，阿里的通义实验室刚发了个新模型叫  Z-Image-Turbo （中文名“造相”）。号称  60 亿参数 、 8 步采样 就能出图，甚至还支持中英文混排渲染。 听起来很美好，对吧？但一看配置要求，很多人（包括我）手里的老显卡就开始瑟瑟发抖。 不过，结合  NeuralFalconYT 的油管教程  和  老E的博客 ，我发现原来大神已经把路铺平了。 最惊喜的是， NeuralFalconYT  提供的版本不仅仅是跑代码，还贴心地套了个  WebUI ！这意味着我们可以在 Google Colab 的免费 T4 显卡上，像用 SD WebUI 一样点点点就能出图。 今天就带大家实操一下，看看这个“Turbo”加持的 WebUI 版在云端到底香不香。 为什么要折腾这个？ 简单说两个理由： 它是真·懂中文 ：原生支持在图里写汉字，生成的招牌、海报不像“鬼画符”了。 有界面（WebUI） ：不用对着枯燥的代码框改参数，这就很舒服。 穷 ：本地显存不够，只能薅 Google 的羊毛。 ✋ 准备工作 Google 账号 。 魔法上网 （连 Colab 必备）。 GitHub 链接 （下面会给）。 🚀 部署步骤（带 WebUI 版） 第一步：获取 Notebook 这次我们直接用 NeuralFalconYT 大佬整理好的 GitHub 仓库。 👉  点击进入 GitHub 仓库: Z-Image-Colab 进去后，在 README 文件里找那个  "Open in Colab"  的蓝色按钮，点它！ 第二步：关键设置（必看！） 进去了别手滑直接点运行！先做两件事： 看右上角，一定要连接到  T4 GPU 。 点菜单栏的【修改】 -> 【笔记本设置】，确认硬件加速器是  T4 GPU 。 注意：如果你用的是 CPU 跑，那基本上是跑不动的。 第三步：一键运行 点击那个大大的  “全部运行” (Run All)  或者一个个点播放键。 脚本会自动安装环境、下载 4-bit 量化模型。 此时你可以去喝杯水 ，安装过程大概需要几分钟。 红字报错警告 ：如果看到 pip 依赖报错，只要代码没停，通常 直接忽略 ...
阅读全文