# SHPlayer 项目总结

## 📋 项目概况

**SHPlayer（Shanhu Player）** 是一个基于 Vue 2.x 的企业级视频播放器组件库，由 tengface 团队开发，版本 0.4.16，采用 MIT 开源协议。

## 🎯 核心功能

### 1. 多播放器引擎支持
- **腾讯云播放器（tcPlayer）**：基于腾讯云点播服务
- **YLC播放器（ylcPlayer）**：自主研发播放器
- **H265播放器**：支持H.265视频格式

### 2. 播放控制功能
- 播放/暂停控制
- 进度条拖动和显示
- 音量控制和静音切换
- 播放速度调节
- 全屏和网页全屏模式

### 3. 企业级特性
- 字幕显示和切换
- 版权水印保护
- 跑马灯效果
- 三屏切换支持
- 机构白名单控制

### 4. 播放方式
- 支持 file_id 播放（腾讯云点播）
- 支持 URL 直接播放
- 支持多种视频格式（H264、H265、m3u8等）

## 🛠️ 技术栈

### 核心技术
- **前端框架**: Vue 2.5.11
- **构建工具**: Webpack 3.6.0
- **样式预处理**: Less
- **转译工具**: Babel

### 主要依赖
- **axios 0.21.1**: HTTP请求库
- **tf_web_log 0.11.0**: 日志记录工具

### 开发依赖
- **vue-loader 13.0.5**: Vue组件加载器
- **webpack-dev-server 2.9.1**: 开发服务器
- **babel-loader 7.1.2**: Babel加载器
- **css-loader 0.28.7**: CSS加载器
- **less-loader 4.1.0**: Less加载器

## 📁 项目结构

```
shanhu_player/
├── dist/                          # 构建输出目录
│   ├── SHPlayer.min.js           # 打包后的播放器组件
│   ├── SHPlayer.min.js.map       # Source map文件
│   └── VideoJS.eot               # 字体文件
├── src/                          # 源代码目录
│   ├── components/               # 组件目录
│   │   ├── SHPlayer/            # 主播放器组件
│   │   │   ├── components/      # 播放器子组件
│   │   │   │   ├── controls/    # 控制栏组件
│   │   │   │   ├── copyrightNotice/  # 版权提示组件
│   │   │   │   ├── marqueeLamp/      # 跑马灯组件
│   │   │   │   └── Subtitles/        # 字幕组件
│   │   │   ├── js/              # 播放器SDK
│   │   │   │   ├── h265player/  # H265播放器SDK
│   │   │   │   ├── tcplayer/    # 腾讯云播放器SDK
│   │   │   │   └── ylcPlayer/   # YLC播放器SDK
│   │   │   ├── index.vue        # 主播放器入口组件
│   │   │   ├── tcPlayer.vue     # 腾讯云播放器封装
│   │   │   ├── ylcPlayer.vue    # YLC播放器封装
│   │   │   ├── CanvasPlayer.vue # Canvas播放器封装
│   │   │   └── Subtitles.vue    # 字幕组件
│   │   ├── constant.js          # 常量配置(图标等)
│   │   └── utils.js             # 工具函数
│   ├── App.vue                  # 开发示例应用
│   ├── main.js                  # 开发环境入口文件
│   └── index.js                 # 组件库入口文件
├── webpack/                     # Webpack配置目录
│   ├── build.config.js          # 生产环境构建配置
│   ├── dev.config.js            # 开发环境配置
│   └── watch.config.js          # 监听模式配置
├── .babelrc                     # Babel配置
├── .editorconfig               # 编辑器配置
├── .gitignore                  # Git忽略文件
├── .npmignore                  # NPM发布忽略文件
├── index.html                  # 开发环境HTML模板
├── indexPlayer.html            # 播放器演示HTML
├── package.json                # 项目配置
└── README.md                   # 项目说明文档
```

## 🚀 构建脚本

- `npm run dev`: 开发模式，启动热重载服务器
- `npm run build`: 生产环境打包
- `npm run build:watch`: 监听模式打包

## 🎨 组件架构

### 主播放器组件（SHPlayer/index.vue）
- 统一的播放器接口
- 支持多种播放器引擎切换
- 事件统一管理和转发

### 播放器引擎组件
- **tcPlayer.vue**: 腾讯云播放器封装
- **ylcPlayer.vue**: YLC播放器封装
- **CanvasPlayer.vue**: Canvas播放器封装

### 功能组件
- **控制栏（controls/）**: 主控制栏、触摸进度条
- **版权提示（copyrightNotice/）**: 版权水印显示
- **跑马灯（marqueeLamp/）**: 跑马灯效果
- **字幕（Subtitles/）**: 字幕显示和切换

## 🌟 项目特点

1. **多播放器引擎支持**: 集成腾讯云播放器和YLC播放器，可根据机构配置动态切换
2. **组件化设计**: 高度模块化，易于维护和扩展
3. **企业级功能**: 支持版权保护、水印、字幕等企业级功能
4. **完善的日志系统**: 集成tf_web_log进行播放器行为追踪
5. **响应式设计**: 支持PC和移动端
6. **白名单机制**: 支持机构级别的播放器选择和配置
7. **事件系统**: 完整的视频生命周期事件
8. **错误处理**: 播放器错误处理和上报

## 💡 使用场景

- 在线教育平台
- 直播点播平台
- 企业培训系统
- 视频网站
- 多媒体展示平台

## 📦 入口文件

- **开发环境**: `src/main.js` → `App.vue`（演示应用）
- **生产环境**: `src/index.js` → `components/SHPlayer`（组件库入口）

## 🔧 配置文件

- **package.json**: 项目依赖和脚本配置
- **webpack/**: Webpack构建配置
- **.babelrc**: Babel转译配置
- **.editorconfig**: 编辑器代码规范配置

---

这是一个功能完善的企业级Vue视频播放器组件，提供了丰富的播放器功能和良好的扩展性，适合各种视频播放场景。
