一刻短剧项目文档
项目概述
【整理自原内容】本项目是基于原生开发网站的二次开发，专注于短剧的竖屏播放体验。由于短剧的形态特性不适合传统H5布局，前端界面将全面模仿抖音的交互与视觉风格。
技术栈说明
【补充内容】项目前端主要采用现代Web技术栈：
- 核心框架：Vue.js（用于构建复杂用户界面和状态管理）
- 播放器核心：Video.js（用于统一播放器UI和处理视频播放逻辑，强烈推荐）
- 样式处理：CSS3、Sass、ElementPlus（用于实现全屏、flex布局、过渡动画等）
- 构建工具：Vite（用于模块化开发和打包）
- HTTP客户端：Axios（用于与后端API交互）
API接口说明
【整理自原内容】后端API主要提供短剧相关内容及分类信息。API管理与测试使用Apifox工具，项目名称为“悦享好剧”。
【补充内容】需重点调用的API接口示例：
GET /api/playlet/list：获取短剧列表（分页）GET /api/playlet/detail/{id}：获取特定短剧的详情和剧集列表GET /api/category：获取分类列表
配色方案
【整理自原内容】主色调采用 #e84a5f，辅助色为 #fecea8。 
【补充内容】配色应用指南：
#e84a5f(主色)：用于主要按钮、重要标签、点赞和关注等核心交互元素。#fecea8(辅助色)：用于背景高光、次要按钮或渐变效果的起点。- 建议扩展色板：可补充中性色（如
#f5f5f5用于背景，#333333用于主要文字，#999999用于次要文字）以确保良好的可读性和层次感。
品牌标识
【整理自原内容】项目图标为“一刻短剧”Logo。 
【补充内容】图标使用规范：
- ** Favicon**：需将图标转换为
.ico格式并设置为网站的favicon。 - 应用图标：应准备多种尺寸（如 192x192, 512x512）以支持PWA（渐进式Web应用）的安装。
- 显示位置：通常出现在首页的左上角、关于页面以及浏览器标签页上。
视频播放关键技术方案
【整理并去重后的核心内容】服务器支持HTTP Range Requests (206 Partial Content)，可实现伪流媒体播放，这是实现流畅体验的基础。
播放器选型分析：Video.js vs 原生Video标签
| 特性 | 原生 <video> 标签 | Video.js |
|---|---|---|
| UI一致性 | 浏览器间样式不统一 | 提供统一、可定制的UI皮肤 |
| 功能与API | 基础API | 扩展API与插件生态 |
| 兼容性 | 依赖浏览器原生支持 | 填补格式支持差距（如HLS） |
| 开发效率 | 需手动处理细节 | 提供高级抽象，节省开发时间 |
推荐实现方案：
- 播放核心：使用 Video.js 库，它封装了原生
<video>标签，提供统一UI、强大API和更好的格式兼容性（例如，未来若支持HLS流，可无缝集成hls.js）。 - 播放体验：利用服务器支持的
Range Requests实现视频的快速启动、拖拽跳转和带宽节约。 - 抖音式交互：实现上下滑动切换视频的核心组件。
- 手势监听：使用
touchstart,touchmove,touchend事件或hammer.js库监听滑动手势。 - 视频管理：采用“三实例模型”，只维护当前、上一个、下一个三个视频元素，优化性能。
- 预加载策略：预先加载下一个视频的元数据和部分数据，实现无缝切换。
- 手势监听：使用
项目路线图建议
【补充内容】推荐的开发优先级：
- 第一阶段 (核心体验)：实现基于Video.js的单视频播放器，验证服务器Range请求与拖拽功能。
- 第二阶段 (核心交互)：开发上下滑动的容器组件，实现视频的切换逻辑与基本预加载。
- 第三阶段 (优化与扩展)：完善UI细节（加载状态、错误处理）、用户系统（点赞、收藏）、剧集选择等功能。
- 未来考量：若后端支持HLS/DASH等流媒体协议，可通过Video.js平滑升级至自适应码率播放。