视频播放网站

视频播放网站

项目简介

这是一个完整的视频播放平台系统，包含PC端前台展示和后台管理功能。系统实现了视频上传、切片处理、在线播放、分类管理、用户管理等核心功能，采用HLS流媒体技术实现视频切片播放，支持大文件上传，适合作为视频网站全栈开发学习项目或计算机设计参考。

版本说明：本项目为 Vue2 基础版。若需要 Vue3、多清晰度 HLS 转码、游客试看、弹幕评论与更完整运营后台，请看升级版：巨峰影视影院。

技术栈

后端技术

技术	版本/说明
运行环境	Node.js 14.21.3
Web框架	Express 4.19.1
数据库	MySQL 8.0+
数据库驱动	mysql
视频处理	fluent-ffmpeg
文件上传	multer
跨域处理	cors
ID生成	nanoid
热重载	nodemon
工具库	lodash

前端技术

技术	版本/说明
前端框架	Vue 2.6.11
UI组件库	Element UI 2.15.6
路由管理	Vue Router 3.0.7
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.24.0
CSS预处理器	Less
粒子效果	vue-particles

项目特点

• 前后端分离：后端提供RESTful API，前端独立开发部署
• HLS流媒体：采用HLS协议实现视频切片播放，支持大文件视频
• FFmpeg处理：自动将上传视频转码为HLS格式（m3u8+ts切片）
• 大文件上传：支持大视频文件上传和处理
• 分类管理：支持视频分类浏览和管理
• 用户角色：区分普通用户和管理员权限
• 响应式设计：适配不同屏幕尺寸

功能模块

前台功能

1. 首页模块 (views/Index.vue)

• 视频列表展示
• 分类标签筛选
• 视频封面预览
• 发布人和时间显示
• 点击播放跳转

2. 视频播放模块 (views/Play.vue)

• HLS流媒体播放
• 视频详情展示
• 播放器控制

3. 用户认证模块

• 用户登录 (views/AdminLogin.vue)
• 用户注册 (views/AdminRegister.vue)
• 登录状态保持

后台管理功能 (views/AdminIndex.vue)

1. 个人信息管理

• 查看账号信息
• 修改用户头像
• 头像图片上传

2. 用户管理（管理员）

• 用户列表查看
• 用户信息展示
• 用户头像显示

3. 视频管理

• 视频列表展示
• 上传新视频
• 编辑视频信息
• 删除视频
• 视频播放预览
• 视频封面上传

4. 分类管理（管理员）

• 分类列表展示
• 创建新分类
• 编辑分类名称
• 删除分类

项目结构

vue-node-video/
├── express/                        # 后端服务（Express + MySQL）
│   ├── public/                     # 静态资源目录
│   │   └── default-avatar.jpg      # 默认头像
│   ├── storage/                    # 视频切片存储目录
│   │   └── {videoId}/              # 每个视频的切片文件夹
│   │       ├── video.m3u8          # HLS播放列表
│   │       └── *.ts                # 视频切片文件
│   ├── uploads-temp/               # 临时上传目录
│   ├── main.js                     # 服务入口文件（包含所有API）
│   └── package.json
│
├── web/                            # 前端项目（Vue2 + Element UI）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   │   ├── index.js            # API接口定义
│   │   │   └── request.js          # Axios请求封装
│   │   ├── assets/                 # 静态资源
│   │   │   ├── images/             # 图片资源
│   │   │   ├── scripts/            # 脚本工具
│   │   │   └── styles/             # 样式文件
│   │   ├── components/             # 公共组件
│   │   │   ├── ImageListUpload.vue # 图片上传组件
│   │   │   └── VideoAddUpdate.vue  # 视频新增/编辑组件
│   │   ├── filters/                # 过滤器
│   │   │   └── index.js            # 日期格式化等
│   │   ├── router/                 # 路由配置
│   │   │   └── index.js            # 路由定义
│   │   ├── views/                  # 页面视图
│   │   │   ├── Home.vue            # 首页布局
│   │   │   ├── Index.vue           # 视频列表页
│   │   │   ├── Info.vue            # 信息页
│   │   │   ├── Play.vue            # 视频播放页
│   │   │   ├── AdminIndex.vue      # 后台管理页
│   │   │   ├── AdminLogin.vue      # 登录页
│   │   │   └── AdminRegister.vue   # 注册页
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vue.config.js               # Vue配置
│
├── 截图/                            # 项目截图
├── video-website.sql               # 数据库SQL文件
├── 视频播放平台.xmind               # 项目思维导图
└── README.md                       # 项目说明

数据模型

用户表 (user)

{
  id: int,                    // 用户ID（自增主键）
  avatar: varchar(1000),      // 头像URL
  role: int,                  // 角色 (0普通用户, 99管理员)
  username: varchar(10),      // 用户名
  password: varchar(100),     // 密码
  active: int,                // 状态 (0禁用, 1正常)
  update_time: timestamp,     // 更新时间
  create_time: timestamp      // 创建时间
}

视频表 (video)

{
  id: int,                    // 视频ID（自增主键）
  user_id: int,               // 上传用户ID
  title: varchar(255),        // 视频标题
  cate_id: int,               // 分类ID
  url: varchar(255),          // 视频播放地址（m3u8）
  cover: varchar(255),        // 封面图URL
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

分类表 (cate)

{
  id: int,                    // 分类ID（自增主键）
  title: varchar(100),        // 分类名称
  cover: varchar(100),        // 分类图标
  update_time: timestamp,     // 更新时间
  create_time: timestamp      // 创建时间
}

视频分类

分类名称	说明
搞笑	搞笑类视频
娱乐	娱乐类视频
体育	体育类视频
新闻	新闻类视频

API接口

用户接口

接口	方法	说明
/user/register	POST	用户注册
/user/login	POST	用户登录
/user/info	GET	获取用户信息
/user/update	POST	更新用户信息
/user/list	GET	用户列表

分类接口

接口	方法	说明
/cate/list	GET	分类列表
/cate/add	POST	新增分类
/cate/update	POST	更新分类
/cate/del	POST	删除分类

视频接口

接口	方法	说明
/video/list	GET	视频列表
/video/info	GET	视频详情
/video/add	POST	新增视频
/video/update	POST	更新视频
/video/del	POST	删除视频

上传接口

接口	方法	说明
/upload/pic	POST	图片上传
/upload/video	POST	视频上传（自动切片）
/play/:videoId/:filename	GET	视频切片播放

运行环境要求

后端环境

• Node.js 14.21.3（推荐）
• MySQL 8.0+
• FFmpeg（必须安装，用于视频切片）
• npm 或 yarn

前端环境

• Node.js 14.0+
• npm 或 yarn
• 现代浏览器（Chrome、Firefox、Edge等）

快速开始

1. 安装FFmpeg

FFmpeg是视频切片处理的核心依赖，必须先安装。

macOS:

brew install ffmpeg

Windows:

1. 下载FFmpeg: https://ffmpeg.org/download.html
2. 解压并添加到系统环境变量PATH

Linux:

sudo apt-get install ffmpeg

2. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE `video-website` CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p video-website < video-website.sql

3. 修改数据库配置 编辑 express/main.js：

var db = mysql.createConnection({
  database: 'video-website', // 数据库名称
  host: 'localhost', // 主机地址
  port: '3306', // 端口号
  user: 'root', // 用户名
  password: 'root', // 密码（修改为你的密码）
});

3. 启动后端服务

# 进入后端目录
cd express

# 安装依赖
npm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:3300

4. 启动前端项目

# 进入前端目录
cd web

# 安装依赖
npm install

# 启动开发服务器
npm run dev

前端项目默认运行在 http://localhost:8080

5. 配置API地址

编辑 web/src/api/request.js，修改API基础地址：

const baseURL = 'http://localhost:3300'; // 修改为你的后端地址

默认账号

管理员账号

• 用户名：admin
• 密码：admin

测试账号

• 用户名：test
• 密码：test

视频处理流程

1. 上传视频：用户通过前端上传视频文件
2. 临时存储：视频先存储到 uploads-temp 目录
3. FFmpeg处理：使用FFmpeg将视频转码为HLS格式
   • 视频编码：libx264
   • 音频编码：aac
   • 切片时长：10秒
   • 输出格式：m3u8 + ts切片
4. 存储切片：切片文件存储到 storage/{videoId}/ 目录
5. 返回地址：返回m3u8播放地址供前端播放

界面预览

项目包含截图文件夹，展示了系统的主要界面：

• 首页视频列表
• 视频播放页面
• 后台管理界面
• 登录注册页面

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 视频评论：添加视频评论功能
2. 点赞收藏：视频点赞和收藏功能
3. 播放统计：视频播放次数统计
4. 视频搜索：关键词搜索视频
5. 用户关注：用户关注和粉丝系统
6. 弹幕功能：视频弹幕系统
7. 视频推荐：基于用户行为的推荐算法
8. 多清晰度：支持多清晰度切换
9. 断点续传：大文件断点续传
10. 视频审核：视频内容审核机制

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. FFmpeg必须正确安装并配置环境变量
3. 视频上传需要足够的磁盘空间存储切片文件
4. 生产环境部署需要配置HTTPS
5. 建议定期清理临时上传目录
6. 大视频文件处理可能需要较长时间

常见问题

Q: 视频上传失败？

A: 检查FFmpeg是否正确安装，可在命令行执行 ffmpeg -version 验证

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 视频无法播放？

A: 检查后端服务是否启动，视频切片文件是否生成成功

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

Q: 登录后无法访问后台？

A: 检查本地存储是否正确保存用户信息

相关推荐

版本	说明	链接
本基础版	Vue2 + Express + MySQL，HLS 切片入门	当前项目
升级版	Vue3 + 多清晰度转码、试看、弹幕评论、运营台	巨峰影视影院

许可证

本项目仅供学习交流使用，请勿用于商业用途。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/vue-node-video