在之前的文章中提到可以使用群晖Nas部署KVideo，但是会发现页面打开的延迟较大，所以资源加载稍微慢点；在项目的文档中也比较推荐使用Vercel 部署 (推荐)或者Cloudflare Pages 部署 (推荐)，确实会快不少，所以这里就使用Cloudflare进行部署，毕竟可以白嫖一下Cloudflare的资源，当然Vercel的部署也是大同小异。

📖 项目简介

KVideo 是一个高性能、现代化的视频聚合与播放应用，专注于提供极致的用户体验和视觉设计。本项目利用 Next.js 16 的最新特性，结合 React 19 和 Tailwind CSS v4，打造了一个既美观又强大的视频浏览平台。

核心设计理念：Liquid Glass（液态玻璃）

项目的视觉设计基于 "Liquid Glass" 设计系统，这是一套融合了以下特性的现代化 UI 设计语言：

  • 玻璃拟态效果：通过 backdrop-filter 实现的磨砂半透明效果，让 UI 元素如同真实的玻璃材质

  • 通用柔和度：统一使用 rounded-2xl 和 rounded-full 两种圆角半径，创造和谐的视觉体验

  • 光影交互：悬停和聚焦状态下的内发光效果，模拟光线被"捕获"的物理现象

  • 流畅动画：基于物理的 cubic-bezier 曲线，实现自然的加速和减速过渡

  • 深度层级：清晰的 z-axis 层次结构，增强空间感和交互反馈

✨ 核心功能

🎥 智能视频播放

  • HLS 流媒体支持：原生支持 HLS (.m3u8) 格式，提供流畅的视频播放体验

  • 智能缓存机制：Service Worker 驱动的智能缓存系统，自动预加载和缓存视频片段

  • 后台下载：利用观看历史，在后台自动下载历史视频，确保离线也能观看

  • 播放控制：完整的播放控制功能，包括进度条、音量控制、播放速度调节、全屏模式等

  • 移动端优化：专门为移动设备优化的播放器界面和手势控制

🔍 多源并行搜索

  • 聚合搜索引擎：同时在多个视频源中并行搜索，大幅提升搜索速度

  • 自定义视频源：支持添加、编辑和管理自定义视频源

  • 智能解析：统一的解析器系统，自动处理不同源的数据格式

  • 搜索历史：自动保存搜索历史，支持快速重新搜索

  • 结果排序：支持按评分、时间、相关性等多种方式排序搜索结果

🎬 豆瓣集成

  • 电影 & 电视剧分类：支持在电影和电视剧之间无缝切换，方便查找不同类型的影视资源

  • 详细影视信息：自动获取豆瓣评分、演员阵容、剧情简介等详细信息

  • 推荐系统：基于豆瓣数据的相关推荐

  • 专业评价：展示豆瓣用户评价和专业影评

💾 观看历史管理

  • 自动记录：自动记录观看进度和历史

  • 断点续播：从上次观看位置继续播放

  • 历史管理：支持删除单条历史或清空全部历史

  • 隐私保护：所有数据存储在本地，不上传到服务器

📱 响应式设计

  • 全端适配：完美支持桌面、平板和移动设备

  • 移动优先：专门的移动端组件和交互设计

  • 触摸优化：针对触摸屏优化的手势和交互

🌙 主题系统

  • 深色/浅色模式：支持系统级主题切换

  • 动态主题：基于 CSS Variables 的动态主题系统

  • 无缝过渡：主题切换时的平滑过渡动画

⌨️ 无障碍设计

  • 键盘导航：完整的键盘快捷键支持

  • ARIA 标签：符合 WCAG 2.2 标准的无障碍实现

  • 语义化 HTML：使用语义化标签提升可访问性

  • 高对比度：确保 4.5:1 的文字对比度

💎 高级模式

  • 独立入口：在浏览器地址栏直接输入 /premium 即可进入独立的高级视频专区

  • 内容隔离：高级内容与普通内容完全物理隔离，互不干扰

  • 专属设置：拥有独立的内容源管理和功能设置

🛡️ 广告过滤

  • 多模式选择：支持关闭、关键词过滤、智能启发式过滤(Beta)和激进模式。

  • UI 集成：在播放器设置菜单中直接切换模式，实时生效。

  • 自定义关键词：支持通过环境变量扩展过滤关键词。

  • 高性能：基于流式处理，对播放加载速度几乎无影响。

🔐 隐私保护

本应用注重用户隐私：

  • 本地存储：所有数据存储在本地浏览器中

  • 无服务器数据：不收集或上传任何用户数据

  • 自定义源：用户可自行配置视频源

克隆项目

将原项目fork到自己的github仓库

Cloudflare Pages 部署 (推荐)

创建项目

  • 点击访问 Cloudflare Pages - Connect Git。

  • 如果未连接 GitHub，请点击 Connect GitHub；若已连接，直接选择你刚刚 Fork 的 KVideo 项目并点击 Begin setup。

配置构建参数

  • Project name: 默认为 kvideo (建议保持不变，后续链接基于此名称)

  • Framework Preset: 选择 Next.js

  • Build command: 输入 npm run pages:build

  • Build output directory: 输入 .vercel/output/static

  • 点击 Save and Deploy。

⚠️ 关键步骤：修复运行时环境

注意：此时部署虽然显示"Success"，但你会发现访问网页会报错。这是因为缺少必要的兼容性配置。请按以下步骤修复：

  • 进入 项目设置页面 (如果你的项目名不是 kvideo，请在控制台手动查找 Settings -> Functions)。

  • 拉到页面底部找到 兼容性标志部分。

  • 添加标志：nodejs_compat

配置访问密码和订阅链接：

  • 打开项目的设置-变量和机密

  • 添加环境变量：ACCESS_PASSWORD为访问密码，SUBSCRIPTION_SOURCES为订阅链接地址

  • 注意：SUBSCRIPTION_SOURCES对应的值为一个json文件的链接地址，不是像项目文档中说的是一个[{name: 'test', url: 'https://aa.com/ss.json'}]

  • 项目中这样配置以后不会显示订阅链接，只需要配置配json的地址即可，项目给了一个默认的订阅链接，可以直接配置使用：https://raw.githubusercontent.com/rapier15sapper/ew/refs/heads/main/test.json

重试部署 (生效配置)：

  • 回到 项目概览页面。

  • 在 Deployments 列表中，找到最新的那次部署。

  • 点击右侧的三个点 ... 菜单，选择 重新部署。

  • 等待新的部署完成后，你的 KVideo 就部署成功了！

访问

重新部署完成以后就可以正常访问了，进入页面后点击设置就会发现这里有在json文件里面配置好的视频源了，在页面上搜索相关资源也能正常访问，延迟也比较低。

高级模式

在浏览器访问地址后面加上 /premium 即可进入独立的高级视频专区，高级模式中访问的是在订阅源文件中grouppremium 的订阅资源，可以根据自己实际需要添加，后续只需要定期更新订阅的json文件内容，重新访问页面即可。