还在为自建的影视页面加载缓慢而烦恼吗？之前我们可能尝试过用NAS部署KVideo，但受限于家庭带宽，外网访问时延迟和加载速度总是不尽如人意。
其实，KVideo官方更推荐使用Vercel或Cloudflare Pages进行部署，速度会快很多。今天，我们就来详细拆解如何利用Cloudflare Pages，完全免费地搭建一个属于你自己的、现代化的视频聚合与播放平台——KVideo。
📖 初识KVideo：不止是播放器，更是视觉享受
KVideo是一个基于 Next.js 16、React 19和Tailwind CSS v4构建的高性能视频应用。它不只是一个简单的播放器，更是一个拥有精美视觉设计和强大功能的视频聚合平台。
它的设计核心叫做 “Liquid Glass”（液态玻璃） ，融合了这些视觉特性：
- 玻璃拟态：通过毛玻璃效果营造出层次感和现代感。
- 光影交互：按钮和卡片在悬停时会有细腻的光效反馈。
- 流畅动画：所有动效都经过精心调校，过渡自然不突兀。
✨ 核心功能
🎥 智能视频播放
HLS 流媒体支持：原生支持 HLS (.m3u8) 格式，提供流畅的视频播放体验。
智能缓存机制：Service Worker 驱动的智能缓存系统，自动预加载和缓存视频片段。
后台下载：利用观看历史，在后台自动下载历史视频，确保离线也能观看。
播放控制：完整的播放控制功能，包括进度条、音量控制、播放速度调节、全屏模式等。
移动端优化：专门为移动设备优化的播放器界面和手势控制。
🔍 多源并行搜索
聚合搜索引擎：同时在多个视频源中并行搜索，大幅提升搜索速度。
自定义视频源：支持添加、编辑和管理自定义视频源。
智能解析：统一的解析器系统，自动处理不同源的数据格式。
搜索历史：自动保存搜索历史，支持快速重新搜索。
结果排序：支持按评分、时间、相关性等多种方式排序搜索结果。
🎬 豆瓣集成
电影 & 电视剧分类：支持在电影和电视剧之间无缝切换，方便查找不同类型的影视资源。
详细影视信息：自动获取豆瓣评分、演员阵容、剧情简介等详细信息。
推荐系统：基于豆瓣数据的相关推荐。
专业评价：展示豆瓣用户评价和专业影评。
💾 观看历史管理
自动记录：自动记录观看进度和历史。
断点续播：从上次观看位置继续播放。
历史管理：支持删除单条历史或清空全部历史。
隐私保护：所有数据存储在本地，不上传到服务器。
📱 响应式设计
全端适配：完美支持桌面、平板和移动设备。
移动优先：专门的移动端组件和交互设计。
触摸优化：针对触摸屏优化的手势和交互。
🌙 主题系统
深色/浅色模式：支持系统级主题切换。
动态主题：基于 CSS Variables 的动态主题系统。
无缝过渡：主题切换时的平滑过渡动画。
⌨️ 无障碍设计
键盘导航：完整的键盘快捷键支持。
ARIA 标签：符合 WCAG 2.2 标准的无障碍实现。
语义化 HTML：使用语义化标签提升可访问性。
高对比度：确保 4.5:1 的文字对比度。
💎 高级模式
独立入口：在浏览器地址栏直接输入 /premium 即可进入独立的高级视频专区。
内容隔离：高级内容与普通内容完全物理隔离，互不干扰。
专属设置：拥有独立的内容源管理和功能设置。
🛡️ 广告过滤
多模式选择：支持关闭、关键词过滤、智能启发式过滤(Beta)和激进模式。
UI 集成：在播放器设置菜单中直接切换模式，实时生效。
自定义关键词：支持通过环境变量扩展过滤关键词。
高性能：基于流式处理，对播放加载速度几乎无影响。
🔐 隐私保护
本应用注重用户隐私：
本地存储：所有数据存储在本地浏览器中。
无服务器数据：不收集或上传任何用户数据。
自定义源：用户可自行配置视频源。
🚀 Cloudflare Pages 免费部署全攻略
项目地址https://github.com/KuekHaoYang/KVideo
准备好了吗？下面我们就开始动手，将KVideo部署到Cloudflare Pages上。
第一步：准备工作
你需要有一个GitHub账号，并将KVideo项目Fork（复制）到自己的GitHub仓库中。
第二步：在Cloudflare Pages创建项目
- 登录Cloudflare Dashboard，进入 Workers 和 Pages > Pages，点击 连接到 Git。
- 授权Cloudflare访问你的GitHub，并选择你刚刚Fork的
KVideo仓库，点击 开始设置。
第三步：配置构建设置
这是最关键的一步，请确保参数填写正确：
- 项目名称：保持默认的
kvideo即可，后续访问链接会基于此名称。 - 生产分支：保持默认（通常是
main或master）。 - 框架预设：在下拉菜单中选择 Next.js。
- 构建命令：手动输入
npm run pages:build。 - 构建输出目录：手动输入
.vercel/output/static。 - 其他选项保持默认，然后点击 保存并部署。
第四步：修复运行时环境（⚠️ 重要！）
此时部署虽然会显示成功，但访问页面通常会报错。这是因为缺少一个关键的兼容性配置。
- 部署完成后，进入该项目在Cloudflare Pages中的 设置 页面。
- 在左侧菜单找到 函数 > 兼容性标志。
- 在 生产兼容性标志 和 预览兼容性标志 两个输入框中，都手动添加标志：
nodejs_compat。 - 点击 保存。
第五步：配置环境变量
回到项目 设置 页面，点击 变量和机密。
- 添加
ACCESS_PASSWORD变量：名称填ACCESS_PASSWORD，值为你想设置的访问密码，并选择“加密”。这样，访问你的KVideo页面时就需要输入密码了。 - 添加
SUBSCRIPTION_SOURCES变量：名称填SUBSCRIPTION_SOURCES，值需要填写一个JSON文件的直链地址。项目本身提供了一个示例链接可以直接使用：https://raw.githubusercontent.com/rapier15sapper/ew/refs/heads/main/test.json。同样选择“加密”。
第六步：重新部署生效
- 前往项目 部署 页面。
- 在部署列表中找到刚才的部署记录，点击右侧的“···”菜单，选择 重试部署。
- 等待几分钟，新的部署完成后，你的KVideo就正式上线了！
🎬 开始使用与探索
现在，通过Cloudflare Pages分配的域名访问你的KVideo，输入你设置的密码。
进入后，点击“设置”，你会发现 SUBSCRIPTION_SOURCES 中配置的视频源已经自动加载进来了。现在，你可以自由搜索并观看影视资源了，速度体验相比NAS部署会有明显提升。
关于高级模式
如前所述，在浏览器地址栏你的域名后加上 /premium，即可进入高级模式。你可以在订阅源文件中配置 group 为 premium 的资源，实现普通内容与高质量内容的物理隔离，定期更新那个JSON文件即可更新高级模式的资源列表。
希望这篇指南能帮你顺利搭建起自己的观影平台。如果在部署过程中遇到任何问题，欢迎在评论区留言交流。
