【免责声明】 本项目仅供技术学习与交流，请支持正版影视。请勿传播未删减版本以免触犯法律风险。

影视源:

1

https://raw.githubusercontent.com/rapier15sapper/ew/refs/heads/main/test.json

（记得绿化）

项目地址：【点击前往】

cloudflare：【点击前往】

零成本搭建：使用 Cloudflare 免费部署全网影视聚合平台

📖 前言

大家好，我是数码解码。由于法律和版权原因，本教程已删除所有敏感福利内容，仅讨论开源技术方案的部署。

今天教大家如何在没有服务器的情况下，利用 Cloudflare Pages 免费部署一个高性能、现代化的影视聚合平台。这个平台基于 GitHub 开源项目构建，支持多源搜索，非常适合自用。

🛠️ 准备工作

• GitHub 账号：用于托管项目代码。
• Cloudflare 账号：用于部署静态页面及边缘计算。
• （可选）个人域名：绑定后访问更稳定。

🚀 部署步骤

1. Fork 源代码

1. 访问影视聚合平台的 GitHub 项目页面。
2. 点击右上角的 Fork，将项目复刻到你的名下。
3. 注意：建议在 Repository name 处随便输入一个名字（如 my-video-site），增加隐私性。
4. 点击 Create fork。

2. 在 Cloudflare Pages 中创建项目

1. 登录 Cloudflare 控制台，点击左侧菜单的 Workers 和 Pages。
2. 选择 创建项目 -> Pages -> 连接到 Git。
3. 授权并选择你刚刚 Fork 的仓库，点击 开始设置。

3. 构建配置

在设置页面，按照以下参数填写：

• 框架预设：Next.js
• 构建命令：npm run build
• 输出目录：.next

填写完成后，点击 保存并部署。

⚙️ 关键环境配置（必看）

部署成功后，还需要配置 Node.js 兼容性，否则页面无法打开。

1. 开启兼容性标志

1. 进入项目设置 -> 运行时 (Runtime)。
2. 找到 兼容性标志 (Compatibility flags)，点击编辑。
3. 在输入框添加：nodejs_compat。
4. 点击保存。

2. 设置环境变量（视频源与密码）

进入 设置 -> 环境变量，添加以下三个关键变量：

重要提示：设置完变量后，必须返回“部署”页面，点击右侧三个点，选择 重新部署 (Retry deployment) 才能生效。

🌐 自定义域名

Cloudflare 提供的默认域名 *.pages.dev 在部分地区可能无法直接打开。

1. 在项目页面点击 自定义域。
2. 点击 设置自定义域，输入你自己的域名。
3. 按照提示激活 DNS 解析即可。

🔒 如何安全地管理视频源？

为了规避法律风险，建议将视频源 JSON 文件托管在自己的 GitHub 仓库：

1. 在 GitHub 创建一个名为 data.json 的文件。
2. 填入你收集的接口地址（确保格式正确）。
3. 点击文件的 RAW 按钮，复制生成的原始链接。
4. 将该链接填入 Cloudflare 的 VIDEO_SOURCES 变量中。

🎬 最终效果

部署完成后，打开域名并输入密码。你可以看到界面非常简洁，支持搜索各线路资源。

• 绿色状态：表示该线路延迟低，推荐使用。
• 无广告播放：点击即可直接调用解析播放。

⚠️ 免责声明

本教程仅供技术交流和个人研究使用。请务必遵守当地法律法规，支持正版影视。作者不提供任何影视资源接口，因非法使用产生的后果由使用者自行承担。

如果你觉得这期教程有帮助，欢迎点赞、订阅！我们下期再见。

🎬 KVideo 项目深度解析

项目地址: KuekHaoYang/KVideo
核心定位: 基于 Next.js 构建的高性能、高颜值聚合视频播放平台。

🌟 项目亮点

1. 极简主义与流态玻璃 (Liquid Glass) 设计

KVideo 不仅仅是一个播放器，它更是一场视觉盛宴。

• 通透感 UI: 采用深度磨砂玻璃效果，界面轻盈且具高级感。
• 物理级动效: 利用 Framer Motion 模拟真实的物理阻尼感，每一次点击和滑动都有细腻的反馈。
• 暗黑模式优先: 专为沉浸式观影设计的配色方案，减少视觉疲劳。

2. 强大的技术骨架

项目基于最前沿的前端技术栈开发，确保了极致的响应速度：

• Next.js 14/15+: 采用 App Router 架构，支持服务端渲染 (SSR) 和流式传输。
• Tailwind CSS: 响应式设计的核心，完美适配手机、平板与 PC。
• TypeScript: 全程类型安全，减少线上 Bug。
• PWA (Progressive Web App): 支持像原生应用一样安装到主屏幕，支持离线缓存。

🛠 核心功能

🚀 快速上手 (开发者指南)

环境要求

• Node.js: 18.x 或更高版本
• 包管理器: pnpm (推荐) 或 npm

部署步骤

1. 克隆仓库

   git clone [https://github.com/KuekHaoYang/KVideo.git](https://github.com/KuekHaoYang/KVideo.git)
   cd KVideo
   

🎬 KVideo 部署与集成全攻略 (Cloudflare 版)

本指南旨在帮助您将 KVideo 部署至 Cloudflare Pages，并集成您提供的影视源接口。

📖 项目综述

KVideo 是一款基于 Next.js 构建的极简主义视频聚合平台。

• UI 风格: Liquid Glass (流态玻璃) 视觉设计。
• 核心技术: Next.js 14+, Tailwind CSS, Framer Motion, PWA。
• 功能: 聚合搜索、豆瓣信息同步、HLS (m3u8) 极速播放。

🛠 第一阶段：影视源“绿化”处理

您提供的源地址为：
https://raw.githubusercontent.com/rapier15sapper/ew/refs/heads/main/test.json

内容解析

该 JSON 包含以下核心模块：

1. Sites: 视频采集站点接口。
2. Live: IPTV 直播频道。
3. Parse: 用于跳过广告的视频解析线路。

提示: 在部署前，建议将该 JSON 内容备份至您的 GitHub Gist 或 Cloudflare KV，以防原作者删除仓库导致服务中断。

🚀 第二阶段：Cloudflare Pages 部署流程

1. 仓库准备

• Fork 项目: 先将 KVideo 官方仓库 Fork 到你的个人账号。
• 修改配置: 为了适配 Cloudflare 的 Edge Runtime，建议在 next.config.js 中添加：

  const nextConfig = {
    images: { unoptimized: true }, // CF Pages 必须开启
    output: 'export',               // 如果作为静态站点部署
  };
  
  ### 2. Cloudflare 控制台操作
  

1. 登录 Cloudflare Dashboard。
2. 在左侧导航栏点击 Workers & Pages。
3. 点击 Create application 按钮，切换到 Pages 选项卡。
4. 点击 Connect to Git。
5. 授权并选择你之前 Fork 的 KVideo 仓库。

3. 构建设置 (Build Settings)

在配置页面按照以下参数填写，以确保项目在 Cloudflare 的边缘环境中构建成功：

4. 环境变量 (Environment Variables)

在部署流程的 Environment variables (advanced) 步骤中添加以下变量，将你的影视源集成到应用中：

• NODE_VERSION: 20
• NEXT_PUBLIC_DEFAULT_SOURCE: https://raw.githubusercontent.com/rapier15sapper/ew/refs/heads/main/test.json
• NEXT_PUBLIC_SITE_NAME: 我的私有影院

⚡ 第三阶段：进阶优化 (防止失效)

由于 GitHub Raw 链接在部分地区访问稳定性较差，建议使用 Cloudflare Workers 作为反向代理来“绿化”并加速访问。

代理代码示例 (Worker)

创建一个新的 Worker，贴入以下 JavaScript 代码：

export default {
  async fetch(request) {
    // 你的影视源原始地址
    const url = "[https://raw.githubusercontent.com/rapier15sapper/ew/refs/heads/main/test.json](https://raw.githubusercontent.com/rapier15sapper/ew/refs/heads/main/test.json)";
    
    const response = await fetch(url);
    const newResponse = new Response(response.body, response);
    
    // 注入跨域头，确保前端可以正常解析
    newResponse.headers.set("Access-Control-Allow-Origin", "*");
    return newResponse;
  },
};