视频剪辑早Yi不再是专业人员的专属技Neng。随着Web技术的飞速发展，我们甚至Ke以在浏览器中完成复杂的视频编辑任务。本文将带你一步步构建一个基于Vue3和TypeScript的Web端视频剪辑器，涵盖时间轴、关键帧、实时预览等核心功Neng。

一、为什么选择Web端视频剪辑器？

传统的桌面剪辑软件虽然功Neng强大，但往往体积庞大、学习成本高。而在线剪辑工具虽然轻量，却常常受限于平台和网络。Web端剪辑器则兼具两者的优点：无需安装、跨平台、随时随地可用，同时又Neng提供接近原生的编辑体验。

技术选型：Vue3 + TypeScript + FFmpeg

我们选择Vue3作为前端框架，TypeScript提供类型安全，FFmpeg负责视频处理。FFmpeg.wasm让浏览器端的视频处理成为可Neng，虽然性Neng不如原生，但对于轻量级编辑需求Yi足够。

二、系统架构设计

整个系统分为前端和后端两部分。前端负责UI交互和状态管理，后端负责文件存储和视频处理。两者通过RESTful API通信。

┌─────────────────────────────────────────────────┐
│                    前端                    │
│  ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│  │ Material │ │ Preview  │ │     Timeline     │ │
│  │   Lib    │ │          │ │ │ │
│  └──────────┘ └──────────┘ └──────────────────┘ │
│                     │ Pinia                      │
│                     ▼                            │
│              ┌────────────┐                      │
│              │ editorStore│                      │
│              └────────────┘                      │
└────────────────────────┬────────────────────────┘
                         │ HTTP API
┌────────────────────────▼────────────────────────┐
│                   后端                   │
│  ┌──────────────┐  ┌──────────────────────────┐ │
│  │   Material   │  │       Export Engine       │ │
│  │   Routes     │  │   │ │
│  └──────────────┘  └──────────────────────────┘ │
│                     │                            │
│              ┌──────┴──────┐                     │
│              │    MySQL    │                     │
│              └─────────────┘                     │
└─────────────────────────────────────────────────┘

三、时间轴与关键帧设计

时间轴是视频剪辑器的核心。我们使用Redux管理整个编辑状态，包括轨道、片段、当前时间等。

// editorSlice.ts
interface TimelineClip {
  id: string;
  materialId: string;      // 关联素材 ID
  trackIndex: number;       // 所在轨道索引
  startTime: number;        // 在时间线上的起始时间
  endTime: number;          // 结束时间
  duration: number;         // 持续时长
  trimStart: number;        // 素材裁剪起点
  trimEnd: number;          // 素材裁剪终点
  muted?: boolean;          // 是否静音
  text?: string;            // 文本内容
  textStyle?: TextStyle;    // 文本样式
}
interface Track {
  id: string;
  type: 'video' | 'audio' | 'subtitle' | 'text';
  name: string;
  clips: TimelineClip;
}
// 初始状态包含4条轨道
const initialState = {
  tracks:  },
    { id: 'text-', type: 'text', name: '文本轨道', clips:  },
    { id: 'audio-', type: 'audio', name: '音频轨道', clips:  },
    { id: 'subtitle-', type: 'subtitle', name: '字幕轨道', clips:  },
  ],
  currentTime: 0,
  duration: 0,
  isPlaying: false,
};

时间轴交互实现

拖拽移动和边缘裁剪通过监听mousemove实现：

const handleMouseMove =  => {
  if  {
    const dx = e.clientX - dragData.startX;
    const dt = dx / ;
    const newStartTime = Math.max;
    dispatch(updateClip({
      trackId: dragData.trackId,
      clipId: dragData.clipId,
      updates: { startTime: newStartTime, endTime: newStartTime + clip.duration }
    }));
  }
};

四、实时预览引擎

预览是Zui具挑战性的部分之一。浏览器原生的元素只Neng播放单个文件，但我们需要播放时间线上拼接的多个片段。

方案：时钟驱动 + 视频同步

Zui初用元素的currentTime驱动时间线，视频播放结束时时间线停止推进。改用系统时钟驱动时间线，视频元素只负责渲染，两者通过currentTime单向同步。

// 用系统时钟驱动时间线推进
const playbackStartRef = useRef<{ time: number; wallClock: number }>;
const updateTime =  => {
  if  return;
  const elapsed =  - playbackStartRef.current.wallClock) / 1000;
  const newTime = playbackStartRef.current.time + elapsed;
  if  {
    dispatch);
  } else {
    dispatch);
  }
  requestAnimationFrame;
};

五、视频导出流水线

导出是后端的核心功Neng。整个流程分为3个阶段：

视频轨道处理

音频混合

字幕烧录

阶段一：视频轨道处理

每个片段单独处理，然后用ffmpeg concat拼接：

// 生成 concat 列表文件
const concatList = segmentPaths.map.join;
fs.writeFileSync;
// 拼接
ffmpeg
  .input
  .inputOptions
  .outputOptions
  .output;

阶段二：音频混合

将音频轨道的片段按时间位置混合到视频中：

// 提取音频片段
ffmpeg
  .outputOptions
  .setStartTime
  .duration;
// 用 adelay 滤镜定位，amix 混合
const filter = `adelay=${delayMs}|${delayMs};amix=inputs=:duration=first`;
ffmpeg
  .input
  .input
  .complexFilter
  .outputOptions;

阶段三：字幕烧录

使用ffmpeg的drawtext滤镜将字幕烧录到视频：

const filter = `drawtext=text='${text}':fontsize=${size}:fontcolor=${color}` +
  `:box=:boxcolor=${bgColor}:boxborderw=` +
  `:x=/:y=${y}` +
  `:enable='between'`;

六、踩过的坑 nodemon 误重启

在exports/目录下创建临时片段文件时nodemon检测到文件变化自动重启服务，导致导出中断。

解决方案将临时文件放到系统临时目录os.tmpdir，并配置nodemon只监听src/目录。

音频流缺失

图片片段和静音视频片段没有音频流，与有音频的片段拼接时整个视频的音频丢失。

解决方案为所有片段统一生成音频流，无音频的片段用anullsrc生成静音轨道。

这个项目还有hen多Ke以改进的地方，但Yi经验证了Web技术栈构建视频剪辑器的可行性。希望本文Neng为有类似需求的开发者提供一些参考。

未来我们Ke以探索使用WebCodecs API来进一步提升性Neng，或者引入AI技术实现自动剪辑、智Neng配乐等功Neng。Web端视频剪辑的未来值得期待。

---