短视频展示平台

一个现代化的短视频展示平台，支持自适应布局、弹幕功能和后台管理。

功能特性

前端功能

• ✅ 响应式设计，完美适配桌面端和移动端
• ✅ 主流视频平台风格的UI设计
• ✅ 首页视频推荐展示
• ✅ 分类筛选（推荐、热门、萌宠、美食、旅行、科技、风景）
• ✅ 视频播放页面
• ✅ 实时弹幕系统
• ✅ 弹幕颜色选择
• ✅ 点赞功能
• WebSocket实时弹幕推送

后台管理

• ✅ 管理员登录认证
• ✅ 视频管理（增删改查）
• ✅ 数据统计面板
• ✅ 视频列表管理

技术栈

• 前端: HTML5 + CSS3 + JavaScript (原生)
• 后端: Node.js + Express
• 实时通信: WebSocket
• 数据存储: JSON文件（可轻松迁移至数据库）

快速开始

安装依赖

npm install

启动服务

# 方式1: 使用启动脚本
./start.sh

# 方式2: 直接运行
node app.js

访问地址

• 前台首页: http://localhost:16035
• 后台管理: http://localhost:16035/admin

默认管理员账号

• 用户名: admin
• 密码: admin123

停止服务

./stop.sh

项目结构

video-platform/
├── app.js                 # 主程序入口
├── package.json           # 项目配置
├── start.sh              # 启动脚本
├── stop.sh               # 停止脚本
├── public/               # 静态文件
│   ├── index.html        # 首页
│   ├── video.html        # 视频播放页
│   ├── admin-login.html  # 后台登录页
│   ├── admin-panel.html  # 后台管理面板
│   ├── css/
│   │   └── style.css     # 样式文件
│   └── js/
│       ├── app.js        # 主逻辑
│       └── player.js     # 播放器和弹幕逻辑
├── data/                 # 数据存储
│   ├── videos.json       # 视频数据
│   ├── users.json        # 用户数据
│   └── comments.json     # 弹幕数据
├── logs/                 # 日志目录
└── views/                # 视图模板（预留）

API接口

前台API

• GET /api/videos - 获取视频列表
• GET /api/videos/:id - 获取单个视频详情
• POST /api/videos/:id/like - 点赞视频
• GET /api/videos/:id/danmaku - 获取弹幕列表
• POST /api/videos/:id/danmaku - 发送弹幕

后台API

• POST /api/admin/login - 管理员登录
• POST /api/admin/logout - 管理员登出
• GET /api/admin/check - 检查登录状态
• POST /api/admin/videos - 添加视频
• PUT /api/admin/videos/:id - 更新视频
• DELETE /api/admin/videos/:id - 删除视频

弹幕系统

弹幕通过WebSocket实现实时推送：

• 支持自定义颜色
• 随机垂直位置
• 平滑滚动动画
• 时间同步播放

自定义配置

修改端口

在 app.js 中修改 PORT 常量：

const PORT = 16035;

修改管理员密码

首次运行后，编辑 data/users.json 文件。

浏览器兼容性

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

注意事项

1. 生产环境建议使用反向代理（如 Nginx）
2. 建议迁移到数据库存储（如 MongoDB、MySQL）
3. 建议添加HTTPS支持
4. 建议添加视频上传功能
5. 建议添加用户注册登录系统

License

MIT