基于PHP+原生JS的视频聚合平台,以西瓜吃瓜为主题,CSV驱动视频资源,瀑布流卡片响应式展示,支持分类筛选、搜索排序、多源切换播放及后台CSV上传管理,无数据库轻量部署,毛玻璃视觉风格,适合快速搭建视频站。
🍉 吃瓜主题视频瀑布流 PHP 源码
📌 项目简介
基于 PHP + 原生 JavaScript 构建的视频聚合与播放平台,以"吃瓜"为主题,将 CSV 文件中的视频资源以瀑布流卡片形式优雅展示,支持分类筛选、搜索、排序及多视频源切换播放。
🎯 核心功能模块
一、视频数据管理(CSV 驱动)
表格
| 特性 | 说明 |
|---|---|
| 数据来源 | 通过 videos.csv 文件动态驱动内容,无需数据库 |
| 编码支持 | UTF-8 / GBK / GB2312 多编码自动识别与转换 |
| 性能优化 | 内置文件缓存机制,提升读取性能 |
| 安全过滤 | 自动过滤无效 URL,仅允许配置的安全域名 |
二、瀑布流展示(响应式)
- 自适应网格布局:移动端 2 列 → 平板 3 列 → 桌面 4~5 列
- 卡片入场渐入动画,流畅的视觉体验
- 每个视频卡片包含:
- 🏷️ 分类标签(左上角)
- 🍉 西瓜主题加载动画
- ▶️ 视频预览(点击播放/暂停)
- 📜 滚动字幕标题(长标题自动跑马灯)
- 🔢 多视频源数量徽章
三、交互功能
表格
| 功能 | 说明 |
|---|---|
| 分类筛选 | 侧滑菜单展示所有分类及视频数量,点击快速筛选 |
| 关键词搜索 | 实时高亮匹配标题,支持中英文搜索 |
| 排序方式 | 从新到旧 / 从旧到新 / 标题 A→Z / 标题 Z→A |
| 视频播放 | 卡片内直接播放(静音自动播放),点击切换暂停/播放 |
| 弹窗播放器 | 全屏沉浸式播放,支持多视频源切换(左右滑动/按钮/键盘) |
| 统计看板 | 底部展示资源总数、视频源总数、分类数、最后更新时间 |
四、后台数据上传(up.php)
- 独立的上传管理页面,仅接受 videos.csv 文件
- 客户端 + 服务端双重验证(文件名、大小 ≤5MB、MIME 类型、CSV 格式)
- 旧文件自动备份到
data/目录,支持历史版本追溯 - 拖拽上传 + 实时文件名校验,友好的用户反馈
🎨 主题与视觉风格
- 🍉 西瓜主题配色(暖橙渐变 + 奶油背景)
- 🍓 漂浮水果 Emoji 装饰,营造轻松氛围
- ✨ 毛玻璃效果(
backdrop-filter)+ 柔和阴影 - 📜 全屏滚动条自定义样式
- 📱 PWA 友好(支持 Manifest 配置)
🛠 技术特点
表格
| 特性 | 实现 |
|---|---|
| 后端语言 | PHP(无框架,轻量高效) |
| 前端 | 原生 JavaScript + CSS3(无外部依赖) |
| 数据格式 | CSV(Excel 可编辑,便于维护) |
| 视频播放 | HTML5 <video>,支持 mp4/webm 等格式 |
| 响应式 | 移动优先,适配手机/平板/桌面 |
| 安全 | 域名白名单验证、文件类型严格校验、XSS 防护 |
🚀 快速部署
- 将
index.php、up.php、videos.csv上传至 PHP 服务器 - 确保
logs/和data/目录可写(权限 755) - 编辑
videos.csv按格式添加视频数据 - 访问
index.php即可浏览,访问up.php可在线更新数据
测试环境:PHP 8.0
⚠️ 注意:添加的视频数据链接域名均要加入系统白名单,位置在
index.php文件的第 150 行左右



