KVideo 是一个基于 Next.js 16、React 19 和 Tailwind CSS v4 构建的现代化、自托管的视频聚合与播放平台，专注于本地数据控制、多源视频聚合与极致视觉体验。所有用户数据（搜索历史、观看记录等）均存储在本地浏览器，不依赖任何远程服务，真正实现“你的数据，你做主”。
核心设计理念：Liquid Glass（液态玻璃）
KVideo 的 UI 基于自研的 “Liquid Glass” 设计系统，融合现代美学与物理直觉：
- 玻璃拟态：通过
backdrop-filter: blur()实现半透明磨砂效果，营造轻盈悬浮感 - 统一圆角：全站仅使用
rounded-2xl与rounded-full，保持视觉一致性 - 光影反馈：悬停/聚焦时触发内发光（
box-shadow: inset），模拟光线被“捕获”的动态 - 物理动画：采用
cubic-bezier(0.34, 1.56, 0.84, 1)等曲线，实现自然缓动 - 深度分层：清晰的 Z 轴层级，强化元素间的空间关系与交互反馈
✨ 核心功能
🎥 智能视频播放
- HLS 原生支持：直接播放
.m3u8流，无需转码 - Service Worker 缓存：智能预加载与片段缓存，提升重复观看体验
- 后台下载：基于观看历史，自动在后台缓存视频（需浏览器支持）
- 完整控制：进度条、音量、倍速（0.5x–2.0x）、画中画、全屏
- 移动端优化：手势滑动调节进度/音量，专为触屏设计的播放器 UI
🔍 多源并行搜索
- 聚合搜索：同时查询多个视频源，结果合并展示
- 自定义源管理：用户可添加、编辑或禁用视频源（支持 JSON/YAML 格式）
- 统一解析器：抽象层自动适配不同源的数据结构
- 搜索历史：本地保存，支持一键重搜
- 多维排序：按评分、发布时间、相关性等排序结果
🎬 豆瓣深度集成
- 自动拉取信息：影片评分、导演、演员、剧情简介、海报
- 专业影评展示：整合豆瓣用户热评与媒体评价
- 智能推荐：基于当前影片的相似作品推荐（需豆瓣 API）
注：豆瓣数据通过公开接口获取，不存储用户行为。
💾 观看历史管理
- 自动记录进度：精确到秒的播放位置保存
- 断点续播：返回视频时自动跳转至上次观看位置
- 本地隐私：所有记录仅存于
localStorage，不上传、不追踪
🌙 动态主题系统
- 深色/浅色模式：支持系统偏好同步或手动切换
- CSS Variables 驱动：主题切换无需重载页面
- 平滑过渡动画：颜色与背景渐变自然过渡
⌨️ 无障碍支持
- 完整键盘导航：播放器、搜索、设置均可通过键盘操作
- ARIA 标签：符合 WCAG 2.2 标准
- 高对比度文本：确保文字与背景对比度 ≥ 4.5:1
- 语义化 HTML：提升屏幕阅读器兼容性
🔐 隐私与访问控制
KVideo 严格遵循本地优先（Local-First） 原则：
- 所有数据存储于浏览器
localStorage或IndexedDB - 无遥测、无分析脚本、无用户行为追踪
- 视频源由用户自行配置，不内置任何第三方商业源
密码保护（可选）
支持两种密码访问模式，适合自托管场景：
方式一：本地密码（设备级）
- 在设置页启用并添加密码
- 仅对当前浏览器生效
- 支持多密码、可随时管理
方式二：环境变量密码（部署级）
适用于 Docker 或 Vercel 部署：
# Docker
docker run -d -p 3000:3000 \
-e ACCESS_PASSWORD=your_secret \
--name kvideo kuekhaoyang/kvideo:latest
# Vercel 环境变量
ACCESS_PASSWORD = your_secret
- 全局生效，所有访客需输入密码
- 与本地密码兼容（任一正确即可解锁）
- 更改需重启服务或重新部署
🛠 技术栈
- 框架：Next.js 16（App Router + Server Components）
- 前端：React 19 + TypeScript
- 样式：Tailwind CSS v4（
@layer组织设计系统） - 状态：Zustand（轻量、TS 友好）
- 缓存：Workbox + Custom Service Worker
- 播放器：自研 HLS 播放器（基于 Media Source Extensions）
- 部署：支持 Docker、Vercel、静态导出
评论