KVideo：基于 Next.js 16 的 Liquid Glass 视频聚合与播放平台

简介

KVideo 是一个高性能的现代化视频播放平台，采用 Next.js 16 构建，并融合 React 19 和 Tailwind CSS v4，专注于提供美观、流畅且强大的观影体验。平台强调“视觉愉悦 + 技术先进”的双重驱动，致力于打造极致易用的视频聚合体验。

预览图

✨KVideo特色功能

🌟 Liquid Glass 设计语言

平台引入了独特的 Liquid Glass（液态玻璃）视觉系统，实现了视觉层级与质感的突破：

• 玻璃拟态：通过 backdrop-filter 打造磨砂质感
• 圆润统一：使用 rounded-2xl 与 rounded-full 增强协调性
• 动态光影：交互时呈现内发光效果，提升真实感
• 自然动效：基于物理曲线的动画过渡
• 立体层次：z-index 构建清晰的空间逻辑

🎥 视频播放核心功能

• 原生 HLS 支持：支持 .m3u8 流媒体格式，播放顺畅不卡顿
• 智能缓存机制：借助 Service Worker 实现边看边缓存
• 后台自动下载：根据观看记录自动离线预下载
• 全功能播放器：支持进度、音量、倍速、全屏控制
• 移动端适配：手势交互与响应式界面完美结合

🔍 多源视频搜索系统

• 并行聚合多个视频源，极速检索
• 用户可自定义和管理视频源配置
• 智能解析器统一处理数据格式
• 支持搜索历史记录与排序筛选（评分、时间、相关性等）

🎬 豆瓣集成支持

• 自动展示影片评分、演员表、剧情简介
• 提供个性化推荐
• 支持查看豆瓣用户评论与专业影评

📺 观看历史与隐私保护

• 自动记录观看进度与历史内容
• 支持断点续播、手动清理记录
• 所有数据本地化存储，不上传至服务器
• 支持设置访问密码，多种加密方式任选

🌓 响应式设计与主题切换

• 全平台适配：桌面、移动、平板无缝切换
• 动态主题：支持系统深浅色与 CSS 动态主题变量
• 手势优化与高对比度阅读体验
• 键盘导航与ARIA标签提升可访问性

🔐 双重密码访问控制机制

• 本地密码模式：适合单设备控制
• 环境变量密码：适合部署环境全局控制（支持 Docker、Vercel）

官网

🔗 在线体验地址：https://kvideo.pages.dev/

🧩 开源项目地址：https://github.com/KuekHaoYang/KVideo