近日项目有个新需求，需要对视频或音频进行多段裁剪然后拼接。例如，一段视频长30分钟，我需要将5-10分钟、17-22分钟、24-29分钟这三段拼接到一起成一整段视频。裁剪在前端，拼接在后端。
网上简单找了找，基本都是客户端内的工具，没有纯网页的裁剪。既然没有，那就动手写一个。
代码已上传到GitHub： https://github.com/fengma1992/media-cut-tool
废话不多，下面就来看看怎么设计的。
效果图
图中底部的功能块为裁剪工具组件，上方的视频为演示用，当然也能是音频。
功能特点：
支持鼠标拖拽输入与键盘数字输入两种模式；
支持预览播放指定裁剪片段；
左侧鼠标输入与右侧键盘输入联动；
鼠标移动时自动捕捉高亮拖拽条；
确认裁剪时自动去重；
*注：项目中的图标都替换成了文字
思路
整体来看，通过一个数据数组
cropItemList 来保存用户输入数据，不管是鼠标拖拽还是键盘输入，都来操作
cropItemList 实现两侧数据联动。最后通过处理
cropItemList 来输出用户想要的裁剪。
cropItemList 结构如下：
cropItemList: [
{
startTime: 0, // 开始时间
endTime: 100, // 结束时间
startTimeArr: [hoursStr, minutesStr, secondsStr], // 时分秒字符串
endTimeArr: [hoursStr, minutesStr, secondsStr], // 时分秒字符串
startTimeIndicatorOffsetX: 0, // 开始时间在左侧拖动区X偏移量
endTimeIndicatorOffsetX: 100, // 结束时间在左侧拖动区X偏移量
}
]第一步
既然是多段裁剪，那么用户得知道裁剪了哪些时间段，这通过右侧的裁剪列表来呈现。
列表
列表存在三个状态：
无数据状态
无数据的时候显示内容为空，当用户点击输入框时主动为他生成一条数据，默认为视频长度的1/4到3/4处。
有一条数据
此时界面显示很简单，将唯一一条数据呈现。
有多条数据
有多条数据时就得有额外处理了，因为第1条数据在最下方，而如果用
v-for 去循环
cropItemList，那么就会出现下图的状况：
