本项目是一个基于 Video.js 深度定制的现代播放器。支持多种格式，多种来源的视频播放。一并支持了以下功能：自适应动态标签切换清晰度并记忆进度；多场景录屏、截屏；自适应反色播放；自适应多路径打码。（涂抹打码、输入位置打码、自适应重绘）
│ App.vue
│ main.ts
│
├─assets
│ ├─css
│ │ controlbar.less //底部控制栏样式
│ │ sidebar.less //侧边栏样式
│ │
│ └─images
│ camera-outline.png //截图图标
│ monitor-screenshot.png //录屏图标
│ source-branch.png //换源图标
│
├─components
│ CustomVideo.vue //实现所有视频功能的SFC
│
├─store
│ videoState.ts //定义了视频全局状态的Store
│
└─utils
├─invert
│ invert.ts //反色模块
│ invert.test.ts //反色模块测试
│
├─pixelate
│ pixelate.ts //打码模块
│ pixelate.test.ts //打码测试模块
│
├─quality
│ qualitySwitching.ts //切换清晰度插件模块
│
└─snapshot
snapshot.ts //多场景截图与录屏模块可以在播放前和播放中切换 URL、文件、默认值等播放源。请注意，添加不同清晰度时需要点击右方加号。
如果您之前使用了多清晰度的源，在播放途中可以点击设置键进行切换。
播放中点击反色键即可反色，再点一次可以关闭反色。
点击截图键即可保存当前视频中的最新帧到本地。（如果处于马赛克或反转颜色状态则截取当前状态下的图片，如果同时处于马赛克和反转颜色状态则截取原视频。）
点击录屏键开始录屏，点击结束键结束录屏并保存到本地。（录屏逻辑同截图。）
点击打码键可以选择打码区域，并且可以在打码区域涂抹。
- 自定义多来源播放（上传文件、URL、默认源）
- 自适应动态标签切换清晰度并记忆进度
- 多场景截屏（反转颜色与马赛克后多源截屏）
- 多场景录屏（反转颜色与马赛克后多源录屏）
- 自适应反色播放
- 自适应多路径打码
- 涂抹打码
- 输入位置打码
- 自适应重绘
- 支持 flv 播放
- 支持 mov 播放
- 支持编码格式为 H.265 格式的视频播放
- 支持直播
- HLS
- 核心功能单元测试
- 通过 Github Actions 实现持续集成与持续部署到云服务器
- 使用 EsLint、Prettier、Husky 全过程统一规范代码
- 引入 Less 预处理器全方位提升 CSS 开发效率
- 搭建静态文件服务
- 搭建页面展示服务
- 明确反色与马赛克同时出现时的截屏与录屏逻辑；（项目内容要求中并未细化。具体实现时，反色与马赛克的源均直接来源于源视频，截图时如果同时反色与马赛克则截两张图。）
- 持续完善单元测试；
- 使用 Video.js 8 重构。（已尝试，由于 Video.js 8 对 TypeScript 的支持目前不佳作罢。）
- 迁移 CI/CD 流程到 Gitee Go；
- 引入 h265web.js-wasm-decoder 来提高播放 HEVC 视频的兼容性。
由于本项目中具体功能大都于易于扩展的功能模块中实现，因此组件数量并不复杂。
- CustomVideo 组件
- 功能：实现了全部视频功能；向外提供数据源和自定义播放选项的接口（Props）
在根组件中引用此组件，并在 App.vue 实现了多来源视频的统一选择，日后项目复杂后易于扩展。
封装了一些较复杂的功能模块（详情请参见注释）：
- pixelate.ts
- snapshot.ts
- invert.ts
由于本项目主要基于成熟的组件库和 HTML 播放器进行开发，因此主要对核心算法进行单元测试。
- pixelate.test.ts
- 功能：对打码算法的核心函数进行测试。
- 具体实现：由于 Node.js 不支持 ImageData 的数据类型，因此自定义 ImgData 类，并对 2*2 的图片数据进行了测试。
- invert.test.ts
- 功能：对反转颜色的核心函数进行测试。
- 具体实现：同样自定义 ImgData 类，对数据进行测试。
在 GPLv3 协议下分发，更多信息请参考 LICENSE。