用开源框架 KVideo 搞了个视频聚合站点，Cloudflare 零成本部署，这UI也太好看了

ivye
网建应用
2026-03-05
198热度
0评论

摘要： 之前一直在用各种视频聚合网站，但说实话体验都挺一般的。广告多就不说了，有些打开速度慢得要命，还动不动就挂了。前阵子刷GitHub的时候偶然发现了KVideo这个项目，试了一下真的惊艳到我了。这项目到底是啥 KVideo是一个视频聚合播放平台，基于Next.js 16开发的。简单说就是把各种视频源整...

之前一直在用各种视频聚合网站，但说实话体验都挺一般的。广告多就不说了，有些打开速度慢得要命，还动不动就挂了。前阵子刷GitHub的时候偶然发现了KVideo这个项目，试了一下真的惊艳到我了。

这项目到底是啥

KVideo是一个视频聚合播放平台，基于Next.js 16开发的。简单说就是把各种视频源整合到一起，你可以同时在多个源里搜索，找到想看的直接播放。项目地址：https://github.com/KuekHaoYang/KVideo

但让我最服气的不是功能，是它的UI设计。项目采用了一种叫"Liquid Glass"的设计风格，翻译过来就是液态玻璃。整个界面有种磨砂半透明的质感，悬停的时候还有光影效果，说实话比很多商业产品都好看。

功能方面也挺全的，支持HLS流媒体、多源并行搜索、豆瓣集成（能看评分和简介）、观看历史、深色模式这些。还有个高级模式入口，在地址栏输入/premium就能进。想先体验一下的可以访问官方Demo：https://kvideo.pages.dev/

部署方式怎么选

这项目支持好几种部署方式，Vercel、Cloudflare Pages、Docker都行。简单说下区别：

Cloudflare Pages：强烈推荐这个，完全免费而且基本无限流量，全球CDN加速国内访问也很快。缺点是配置稍微麻烦一点点。

Vercel：最简单的方式，一键部署，但有流量限制，超了要收费。适合懒得折腾的。

Docker：需要有自己的服务器，适合已经有NAS或VPS的玩家，可控性最强。

方式一：Cloudflare Pages部署（推荐）

这是我最推荐的方式，免费、速度快、稳定。跟着走一遍就行。

第一步：Fork项目

打开项目地址 https://github.com/KuekHaoYang/KVideo，点右上角的Fork按钮，把项目复制到你自己的GitHub账号下面。没有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，在 Cloudflare控制台找到你的项目，进入 Settings -> Functions），拉到页面底部找到 Compatibility flags 部分，添加标志：nodejs_compat

这步是给Next.js加Node.js兼容性的，不加就跑不起来。

第五步：重新部署

回到项目概览页面，在 Deployments 列表中找到最新的那次部署，点击右侧的三个点 ... 菜单，选择 Retry deployment。等待新的部署完成后，这回就能正常访问了。

访问地址一般是你的项目名.pages.dev，比如 kvideo.pages.dev 这样的。

绑定自定义域名（可选）

如果你有自己的域名，还可以绑定上去，这样访问更方便也更专业。在项目设置里找到 Custom domains，点 Set up a custom domain，输入你的域名就行。如果域名是在Cloudflare托管的，DNS会自动配置；如果在其他地方，按提示添加CNAME记录指向你的 xxx.pages.dev 地址即可。整个过程也是免费的，Cloudflare还会自动帮你配好HTTPS证书。