巨峰影视影院

基于 Node.js + Express + MySQL + Vue3 的视频点播网站：分片上传、多清晰度 HLS 转码、试看鉴权、弹幕评论与运营后台。

ffmpeg / ffprobe 已内置在后端依赖中（@ffmpeg-installer / @ffprobe-installer），安装依赖后即可转码，无需在系统单独安装 ffmpeg。

版本说明：本项目为建议版 / 升级版，在 视频播放网站（Vue2 基础版） 之上重构为 Vue3 + 更完整的转码、试看、弹幕评论与运营后台。若只需更轻量的 Vue2 + HLS 入门实现，请看基础版。

---

技术栈

端	技术
后端	Express 5、MySQL2、JWT、fluent-ffmpeg、分片上传
前端	Vue 3、Vite、Pinia、Vue Router、Element Plus、hls.js、Plyr
媒体	HLS（多码率 master）、播放令牌 pt、游客试看

---

功能介绍

整体定位：一套可本地一键跑通的 点播影院 + 运营后台。内容从「上传原片 → 选清晰度转码 → 前台播放」闭环；互动含弹幕、二级评论、点赞收藏与观看历史。
权限模型简洁：登录即可完整观看，游客仅试看；管理员（role=99）进入运营台。代码中没有 VIP/SVIP 支付或会员订单模块。

---

一、前台影院

1. 导航与频道

• 顶栏展示站点品牌名（后台可改）、关键词搜索、首页 / 登录注册 / 个人中心。
• 管理员登录后出现「管理台」入口；已登录显示用户名与退出。
• 频道栏：首页 + 全部分类，点击按分类筛选列表（URL ?cate=）。

2. 首页浏览

• 仅展示已上架成片（status=ready）的卡片网格。
• 卡片含封面（16:9 裁切）、时长、播放量、弹幕数、UP 主、分类名。
• 支持「最新 / 热门」排序；可按分类、标题或 UP 用户名搜索。
• 分页加载（默认每页 30）与「加载更多」。

3. 播放体验

• 路由 /play/:id：详情、播放器、相关推荐（同分类最多 4 条）。
• 游客：试看流（preview.m3u8），到达阈值后遮罩提示登录；短片规则为「片长一半」，长片最多试看到配置秒数（默认 60，可后台改）。
• 已登录且账号启用：完整 HLS（master.m3u8），播放器内切换多清晰度（hls.js + Plyr）。
• 封面优先用户上传图，否则用转码截帧；播放令牌过期可自动刷新。
• 进入页面上报播放量（同用户/IP 约 60 秒去重）；登录用户定时上报观看进度写入历史。

4. 弹幕

• 按时轴展示滚动弹幕；本地可开关显示。
• 登录后发送（1–50 字，可选颜色，绑定当前时间点）。
• 单片可关弹幕（danmaku_enabled），关闭后前台不可发、不拉列表。

5. 评论

• 二级结构：主评 + 回复（展示「回复 @某人」）。
• 登录后发主评/回复（最多 500 字）；本人或管理员可删，删主评连带其下回复。
• 单片可关评论（comment_enabled）。

6. 互动与个人中心

• 播放页：点赞 / 取消赞、收藏 / 取消收藏，计数即时更新。
• 个人中心（需登录）：改头像、我的收藏、最近观看历史（约 50 条），卡片可跳转播放。

7. 账号

• 统一登录页 /login、注册页 /register，支持 redirect 回跳（含进入 /admin）。
• 旧地址 /admin/login 自动跳到统一登录。
• 非管理员带着后台回跳登录成功后，提示无权限并回到首页。

---

二、运营后台（管理员）

侧栏分组：数据洞察 / 内容运营 / 社区与用户 / 系统；可回前台、退出登录。

1. 运营概览

• KPI：用户数、视频总数、可播放数、待转码、活跃转码任务、队列长度、弹幕数、评论数。
• 图表：近 7 日观看/上传趋势、视频状态分布、分类播放量、转码任务状态、热门 TOP。
• 快捷入口：上传、视频、任务、分类、用户、设置。

2. 视频管理

• 按状态、标题筛选；封面缩略图、状态标签、播放量。
• 编辑标题、分类、简介、封面；开关弹幕/评论；成片就绪后可上架/下架。
• 发起转码：勾选 240p–2160p；可看已有档位；支持增量补档或替换确认。
• 跳转该片评论/弹幕管理；删除视频（库记录 + 关联媒体与任务）；ready 片可前台预览。

3. 上传

• 填标题、分类、简介、封面后选原片（mp4/mkv/avi 等）。
• 分片上传 + 文件 MD5 + 断点续传 + 秒传；完成后状态为待转码，不自动转码，需在视频管理手动发起。

4. 转码任务

• 按状态筛选；展示清晰度、进度、当前档位、操作人、错误信息。
• 暂停 / 继续 / 删除（终态可清记录）；列表定时刷新。

5. 分类 / 用户

• 分类：增删改名称与排序，前台频道共用。
• 用户：搜索；启用/禁用；普通 ↔ 管理员切换（内置账号不可改权限；不能禁用或降权自己）。

6. 弹幕 / 评论管理

• 弹幕：按视频 ID 筛选、单条删除、清空整片弹幕。
• 评论：按视频 ID、用户名、内容关键词、主评/回复筛选；详情抽屉、看视频、批量删除、清空整片评论。
• 均可从视频列表带 ?id= 跳入。

7. 系统设置

• 站点名称、试看阈值（秒）、上传体积上限（字节）；保存后即时影响前台品牌名与试看策略等。

---

三、媒体与转码管线

环节	能力
分片上传	校验已传分片、合并原片到 storage/sources；秒传可复用已有文件并更新元数据
图片	登录用户上传封面/头像至 public/uploads
转码	多档 HLS；按片源高度不上采样；临时目录转完再替换成品；可 kill 进程实现暂停
产出	master.m3u8、各档 v{height}/index.m3u8、preview.m3u8、poster.jpg
播放令牌	独立 JWT；完整流绑定用户且拉流时复核账号有效；试看限制清晰度与分片范围
分发	/media/... 校验 pt；下架/未就绪拒绝；HLS 请求不计入 API 限流

ffmpeg / ffprobe 随 npm 依赖按 macOS / Windows / Linux 安装，无需本机另装。

---

四、账号、权限与安全

• 角色：0 普通用户，99 管理员；后台路由与管理接口均校验管理员。
• 鉴权：JWT Bearer；受保护接口查库确认账号仍启用。
• API 限流：全局限流 + 登录接口更严；避免爆破与刷接口。
• 播放令牌与登录 Token 密钥分离、可配置过期时间。
• 媒体路径防目录穿越；头像等仅允许站内 /uploads/ 路径。
• 空库自动初始化默认账号（见 SQL内置说明.md）；生产请立刻改密并更换 JWT / 播放密钥。

---

五、典型使用路径

管理员登录 → 上传原片与封面 → 视频管理勾选清晰度转码
    → 任务成功且上架 → 前台首页可见
游客试看 / 用户登录完整观看 → 发弹幕评论、点赞收藏
管理员在评论/弹幕台清理内容，在设置里调试看与站点名

---

仓库目录结构

uploads、storage 下子目录只需保留空文件夹（或由程序启动时自动创建），勿提交大文件与成品媒体。

node-video-website/
├── 项目说明.md                      # 本文件
├── 运行文档.md                      # 环境、安装与启动
├── SQL内置说明.md                   # 数据库自动初始化说明
├── .npmrc                           # 建议国内 npm 镜像
├── .gitignore
│
├── express/                         # ========== 后端 ==========
│   ├── server.js                    # 入口：ensureDb → 起服务 → 恢复转码队列
│   ├── package.json                 # 依赖与脚本（dev/start/init-db/postinstall）
│   ├── .env.example                 # 环境变量模板（复制为 .env）
│   ├── .env                         # 本地配置（勿提交密钥）
│   ├── .npmrc                       # 后端安装镜像
│   ├── public/                      # 静态资源根
│   │   ├── uploads/                 # 【目录】封面、头像等公开图片
│   │   └── app/                     # 【目录】前端 build 产物（生产托管）
│   ├── storage/                     # 【目录】媒体根（可用 STORAGE_ROOT 覆盖）
│   │   ├── chunks/                  # 【目录】上传分片临时
│   │   ├── sources/                 # 【目录】合并后的原片
│   │   ├── hls/                     # 【目录】转码成品 HLS
│   │   ├── hls_tmp/                 # 【目录】转码工作临时目录
│   │   ├── hls_backup/              # 【目录】替换转码时的备份
│   │   └── uploads/                 # 【目录】其他落盘（按需）
│   └── src/
│       ├── app.js                   # Express 装配：CORS、限流、路由、SPA 回退
│       ├── config/
│       │   └── index.js             # 读取 .env：端口、MySQL、JWT、试看、存储路径
│       ├── db/
│       │   ├── schema.sql           # 空库首次：建表 + 分类/设置/默认账号
│       │   ├── ensureDb.js          # 启动时自动建库建表（已有库则跳过）
│       │   ├── init.js              # CLI：npm run init-db
│       │   └── pool.js              # mysql2 连接池
│       ├── middleware/
│       │   ├── auth.js              # JWT 签发；可选登录 / 必登 / 管理员
│       │   └── errorHandler.js      # 统一错误响应
│       ├── routes/
│       │   ├── auth.js              # 注册、登录、/me、登出
│       │   ├── cate.js              # 分类增删改查
│       │   ├── video.js             # 视频列表/详情/后台 CRUD、上下架
│       │   ├── upload.js            # 分片校验、上传、合并、图片上传
│       │   ├── play.js              # 播放令牌（完整 / 试看）
│       │   ├── media.js             # HLS 分片鉴权与输出（/media）
│       │   ├── transcode.js         # 转码任务创建、列表、暂停/取消等
│       │   ├── danmaku.js           # 弹幕前台 + 后台列表/清空
│       │   ├── comment.js           # 评论前台 + 后台筛选/批量删/清空
│       │   ├── social.js            # 点赞、收藏、观看历史、播放上报
│       │   ├── user.js              # 头像；后台用户列表与启停/角色
│       │   └── admin.js             # 仪表盘统计、图表、站点设置
│       ├── services/
│       │   ├── chunkService.js      # 分片落盘、合并、秒传相关
│       │   ├── transcodeService.js  # ffmpeg 多清晰度 HLS + 预览片
│       │   ├── playTokenService.js  # 播放 JWT 签发与校验
│       │   ├── previewService.js    # 试看秒数、preview 播放列表估算
│       │   └── settingsService.js   # 读 setting 表（试看阈值等）
│       ├── jobs/
│       │   └── transcodeQueue.js    # 转码队列、并发泵、启动恢复
│       └── utils/
│           ├── response.js          # ok / fail 统一 JSON
│           ├── qualityPresets.js    # 清晰度档位与 ffmpeg 参数
│           ├── ffmpegBinary.js      # 绑定项目内 ffmpeg/ffprobe
│           └── ensureFfmpegExecutable.js  # postinstall：补可执行权限
│
└── vue3-website/                    # ========== 前端（影院+后台同一 SPA）==========
    ├── package.json
    ├── vite.config.js               # 端口 7892；代理 /api /media /uploads；build→express/public/app
    ├── index.html
    ├── public/                      # 前端静态资源
    └── src/
        ├── main.js                  # 创建应用、Pinia、Router、Element Plus
        ├── App.vue                  # 根组件
        ├── api/
        │   └── index.js             # axios 实例、鉴权失效跳转、全部 API
        ├── router/
        │   └── index.js             # 前台/后台路由；登录与管理员守卫
        ├── stores/
        │   ├── auth.js              # token / 用户 / 登录注册登出
        │   └── site.js              # 站点名等公开配置
        ├── layouts/
        │   ├── CinemaLayout.vue     # 前台顶栏、分类频道、主内容区
        │   └── AdminLayout.vue      # 后台侧栏布局
        ├── views/
        │   ├── front/
        │   │   ├── HomeView.vue     # 首页列表：最新/热门、分类、搜索、加载更多
        │   │   ├── PlayView.vue     # 播放、弹幕、评论、相关推荐、互动
        │   │   ├── LoginView.vue    # 统一登录（含进后台的 redirect）
        │   │   ├── RegisterView.vue # 注册
        │   │   └── ProfileView.vue  # 个人中心：收藏、历史
        │   └── admin/
        │       ├── DashboardView.vue  # 仪表盘 KPI + ECharts
        │       ├── VideosView.vue     # 视频管理、编辑、转码入口、跳评论/弹幕
        │       ├── UploadView.vue     # 后台上传原片与封面
        │       ├── TasksView.vue      # 转码任务列表与操作
        │       ├── CatesView.vue      # 分类管理
        │       ├── UsersView.vue      # 用户管理
        │       ├── DanmakuView.vue    # 弹幕管理
        │       ├── CommentsView.vue   # 评论管理（筛选/批量删/详情）
        │       └── SettingsView.vue   # 站点设置
        ├── components/
        │   ├── video/
        │   │   └── VideoCard.vue      # 视频卡片（封面 16:9）
        │   ├── player/
        │   │   ├── VideoPlayer.vue    # Plyr + hls.js、清晰度、试看闸
        │   │   └── plyrI18n.js        # 播放器中文文案
        │   └── ImageListUpload.vue    # 图片上传（封面等）
        ├── composables/
        │   ├── useChunkUpload.js      # 分片上传、MD5、断点续传
        │   └── useAdminTheme.js       # 后台主题挂载
        ├── styles/
        │   ├── theme-cinema.css       # 前台主题变量与通用样式
        │   └── theme-admin.css        # 后台主题与表格等
        └── utils/
            └── media.js               # 媒体 URL 相对/绝对转换

---

核心业务流（简述）

1. 上传：前端分片 → /api/upload 校验 / 秒传 / 合并 → 原片落入 storage/sources
2. 转码：后台勾选清晰度 → 任务入队 → ffmpeg 写出 storage/hls → 视频状态 ready
3. 播放：/api/play/token 签发短时令牌 → /media/.../master.m3u8?pt=...；未登录走 preview
4. 社区：弹幕、评论（主评 + 二级回复）、点赞收藏、播放量

---

默认账号（仅空库首次初始化写入）

用户名	密码	角色
admin	admin	管理员（内置）
test	test	普通用户（内置）
admin2	admin2	管理员（演示）
test2	test2	普通用户（演示）

详见 SQL内置说明.md。

---

相关文档

• 运行文档.md — 环境与启动步骤
• SQL内置说明.md — 无需手工导 SQL

相关推荐

版本	说明	链接
基础版	Vue2 + Express + MySQL，HLS 切片入门，结构更轻	视频播放网站
本升级版	Vue3 + 多清晰度转码、试看、弹幕评论、运营台	当前项目