i-love-video

一个简单好用且免费的视频剪辑网站❤

上线地址：http://8good.top

项目源码：https://github.com/axing521/i-love-video

1.功能列表

• 视频轨道
  • 上传视频（P0）：支持mp4格式的视频上传，作为编辑器的基础素材，编辑器中的视频时长和上传的视频保持一致。上传视频后可在编辑器中查看和播放。✅
  • 视频裁剪（P2）：可将视频在指定位置做裁剪，裁剪后视频将从裁剪出分成两个视频片段✅
  • 删除（P2）：可删除指定视频片段✅
• 字幕轨道
  • 自定义时间（P0）：支持字幕开始和结束时间的编辑✅
  • 多字幕-单轨（P1）：支持不同时间段出现多个字幕✅
  • 多字幕-双轨（P2）：支持在同一时刻上出现两个字幕轨道，即画面同时可出现两种字幕✅
  • 自定义位置（P1）：提供用户编辑字幕位置的功能✅
  • 自定义字号、颜色（P1）：提供字号、颜色的编辑功能✅
  • 艺术字（P2）：支持字幕的花样展示设置，具体形式不限，可充分发挥想象力🚧
• 贴图轨道
  • 自定义时间（P0）：支持贴图开始和结束时间的编辑✅
  • 自定义位置（P1）：提供用户编辑贴图位置的功能✅
  • 自定义放缩、旋转（P2）：提供放缩、旋转的编辑功能🚧（放缩功能完成）
  • 多轨道（P2）：最多支持三轨道，即最多在同一时刻出现3张贴图✅
  • 酷炫设置（P2）：具体形式不限，可充分发挥想象力，支持各种贴图酷炫效果🚧
• 预览
  • 从头预览（P0）：点击预览按钮，支持预览当前的效果✅
  • 指定位置预览（P1）：拖动游标，支持任意时刻的效果预览✅
• 其他功能
  • 删除（P1）：支持各元素的删除功能✅
  • 回退（P2）：支持在编辑过程中，按Ctrl+Z或指定按钮，回退当前的操作🚧
  • 导出（P0）：无需真正导出制作好的视频，定义好数据接口，点击导出按钮弹一个对话框把要传给后端的数据展示出来即可✅
• 附加功能（音频轨道）
  • 自定义时间：支持音频开始和结束时间的编辑✅

2.源码地址

项目源码：https://github.com/axing521/i-love-video

3.线上演示

上线地址：http://8good.top

4.方案设计

见附件（方案设计.pdf）

5.演示视频

录屏演示：https://i-love-video.oss-cn-beijing.aliyuncs.com/i-love-video.mp4

---

技术栈：

• 🎪 基于 vue3 框架开发
• ⚡ 基于 vite 开发，获取更快速的启动速度
• 🦾 完全使用 typescript 提供完备的代码类型检查
• 🔋 使用pinia 提供状态管理服务，极大地简化了组件间通信

UI库：

• Element-plus

音视频工具包:

• FFmpeg

📦 Install

pnpm install

🦄 serve

pnpm run dev

🧱 build

pnpm run build