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