【开源推荐】现代化视频聚合搜索前端 OuonnTV 2.0

开发调试
, ,
1

OuonnkiTV是什么？

OuonnkiTV 是一个纯前端的视频聚合搜索与播放应用，不提供任何内容资源，仅作为搜索和播放界面连接用户自行配置的视频源 API。说白了就是一个好看的壳子，源是你自己的，它只负责帮你搜和播。

项目最初基于 LibreTV 衍生而来，早期版本在它的基础上做了一些功能增强和 UI 调整。随着需求越来越多、改动越来越大，逐渐从原项目的架构中独立了出来，用 React 19 + TypeScript + Vite 6 + TailwindCSS 4 全部重写，形成了现在这个完全独立的项目。感谢 LibreTV 提供的起点。

GitHub：GitHub - Ouonnki/OuonnkiTV: Ouonnki TV —— 一键搭建个人影视站，支持Vercel自动部署，基于LibreTV修改
体验地址：https://tv.ouonnki.site/

2.0 有什么不一样？

相比之前佬友分享的版本，2.0 基本上是脱胎换骨的重构，简单列几个重点：

TMDB 智能模式

接入了 TMDB（The Movie Database）的数据，搜索结果不再和之前一样是混乱的列表，而是自动关联高清海报、评分、演员信息、剧情简介和相关推荐。首页也从空白页变成了类似 Netflix 风格的浏览体验，有热映、热门、口碑最佳等分类轮播。

没有 TMDB Key 也能用，项目提供了兼容模式，直接走视频源数据，功能完整只是少了元数据增强。

全端适配（重点回应）

上次帖子里有佬友提到移动端体验不够好，这块 2.0 花了不少精力，目前已经同时适配了桌面端、平板端和移动端三个平台：

  • 桌面端：侧边栏导航，宽屏多列布局，鼠标悬浮交互
  • 平板端：自适应栅格，触控手势优化
  • 移动端：底部手势操作、播放器音量/进度滑动控制、轮播比例自适应（4:3），从布局到交互都针对小屏重新做了适配

不是简单的响应式缩放，每个端都有独立的交互逻辑和布局策略。

多源聚合搜索

支持同时搜索多个视频源，并发请求、自动去重。搜索页提供两种模式一键切换：

  • 智能检索：走 TMDB 匹配，先搜元数据再关联源，海报评分一应俱全
  • 直连搜索：直接请求视频源 API，速度更快，结果实时流式返回

播放体验

  • 基于 Artplayer + HLS.js 的播放内核，支持 HLS 流媒体
  • 智能换源：播放过程中后台持续匹配其他视频源，找到更优结果会弹出提示，一键切换
  • 自动续播：记录观看进度，下次打开自动跳转到上次位置
  • 迷你播放器：向下滚动页面时播放器自动悬浮为迷你窗口
  • 画中画、截图、倍速、循环等常用功能齐全
  • 移动端支持手势滑动调节音量和进度

收藏与观看记录

  • 收藏夹支持按状态筛选（未看 / 在看 / 看完）、多种排序方式、批量管理
  • 观看记录按时间线展示，支持继续观看，首页也有"继续观看"入口

视频源管理与订阅

支持通过 JSON 文件、URL 链接、文本粘贴 三种方式添加视频源，可以对每个源单独启用/停用、编辑参数。

重点说一下订阅功能：可以填入一个远程 JSON 地址，应用会自动拉取并更新源列表，省去手动导入的麻烦。

:paperclip: 这里分享一个整理好的视频源仓库：GitHub - ZhuBaiwan-oOZZXX/OuonnkiTV-Source: 为 OuonnkiTV 提供高质量的视频源，每日检测更新
直接复制仓库中的 JSON 链接，在 OuonnkiTV 的 设置 → 视频源管理 中使用订阅功能导入即可。后续仓库更新了源，应用端同步刷新，不需要再手动操作。

:puzzle_piece: 给开发者：@ouonnki/cms-core 核心引擎

在做 2.0 重构的过程中，我把所有和视频源交互的核心逻辑抽离成了一个独立的 npm 包 —— @ouonnki/cms-core。

这个包是纯函数、无头、事件驱动、框架无关的，零 UI 依赖，浏览器和 Node.js 环境都能跑。如果有佬友想自己搓一个影视聚合站、影视搜索 Bot、或者任何需要对接 CMS 视频源 API 的工具，可以直接装这个包来用，不需要从零开始写请求、解析、去重这些逻辑。

pnpm add @ouonnki/cms-core

它能做什么：

能力 说明
多源聚合搜索 并发搜索多个视频源，自动去重，支持 AbortSignal 取消
视频详情获取 拉取完整元数据，自动解析播放地址为可用的 M3U8 链接
视频列表浏览 获取视频源的推荐/最新内容
视频源管理 不可变数据模式的增删改查、批量导入导出、格式校验
M3U8 广告过滤 处理 HLS 清单，移除广告片段标记，可直接集成 HLS.js
事件系统 9 种类型化事件（搜索开始/进度/结果/完成/错误等），方便做 UI 绑定或日志
代理策略 内置多种 CORS 代理方案，也可以自定义请求适配器

快速上手示例：

import { createCmsClient, createUrlPrefixProxyStrategy } from '@ouonnki/cms-core'

const client = createCmsClient({
  proxyStrategy: createUrlPrefixProxyStrategy('/proxy?url='),
  concurrencyLimit: 3,
})

// 监听搜索进度
client.on('search:result', (e) => {
  console.log(`来自 ${e.source.name} 的 ${e.items.length} 条结果`)
})

// 多源聚合搜索
const results = await client.aggregatedSearch('你想搜的片名', sources, 1)

// 获取详情和播放地址
const detail = await client.getDetail('12345', sources[0])
console.log(detail.episodes) // 解析好的 M3U8 地址列表

client.destroy()

包分三个入口，按需引入：

  • @ouonnki/cms-core — 客户端、搜索、详情、事件、适配器
  • @ouonnki/cms-core/source — 视频源增删改查、导入导出、校验
  • @ouonnki/cms-core/m3u8 — M3U8 广告过滤、HLS.js Loader 集成

有兴趣的佬友可以直接看 npm 包或者源码，在项目的 packages/cms-core 目录下。不管是想搓个 Telegram Bot 自动搜片，还是想用其他框架（Vue、Svelte 等）自己写个前端，核心逻辑直接拿来用就行。

部署方式

支持多种部署方案，按需选择：

方式 说明
Vercel 一键 Fork + Deploy，零服务器
Cloudflare Pages 同上，走 CF 节点
Netlify 同上
Docker docker compose up -d，支持 Docker Hub 和 GHCR 镜像
本地运行 pnpm install && pnpm dev

前三种纯静态方案都自带 Serverless 代理函数解决跨域问题，Docker 方案用 Nginx + Node.js 代理。基本上有个能访问的环境就能跑。

最后

项目完全开源，Apache 2.0 协议。有兴趣的佬友可以自行部署体验，有问题或建议欢迎在 GitHub Issues 反馈，也可以直接在评论区聊。

:rocket: 快速开始

Deploy with Vercel

Docker、Cloudflare Pages、Netlify、本地开发等完整部署指南 → docs/deployment.md

:open_book: 文档

文档 说明
部署指南 Docker / Vercel / Cloudflare / Netlify / 本地开发 / 更新同步
配置管理 环境变量、TMDB 配置、完整配置导入
TMDB Key 申请 TMDB API Token 注册与获取教程
视频源导入 导入方式、JSON 格式说明
开发者指南 技术栈、项目结构、代理架构、@ouonnki/cms-core
2 个赞
3

感谢分享